Paint Basic Line in Canvas
Please help fix the problem. Now lines are drawn to something like a "fan". But I need the lines were drawn in a standard graphics editor. I am where there were mistakes in the transfer of coordinates in the function. But I can not understand where ...

Thank you all for your help.
    
 

    var canvas = document.getElementById("myCanvas"); 
            var context = canvas.getContext("2d");
        
            canvas.width  = 640;
            canvas.height = 480;
        
            var posMouse = {};
            posMouse.paint = false;
        
            $('#myCanvas').mousedown(function (e) 
                {
                    posMouse.paint = true;
                               
                    posMouse.x1 = e.pageX - this.offsetLeft;
                    posMouse.y1 = e.pageY - this.offsetTop;         
        
                    $("#xPosMouseDown").text("Х - down: " + posMouse.x1 + "; ");                    
                    $("#yPosMouseDown").text("Y - down: " + posMouse.y1 + "; ");                       
                });
                
            $('#myCanvas').mousemove(function (e) 
                {           
                    if (posMouse.paint == false){return false;}
        
                            posMouse.x2 = e.pageX - this.offsetLeft;
                            posMouse.y2 = e.pageY - this.offsetTop;
             
                            context.beginPath();
                            context.moveTo(posMouse.x1, posMouse.y1);        
                            context.lineTo(posMouse.x2, posMouse.y2);                                    
                            context.stroke();
                            context.closePath();
                            
                            $("#xPosMouseMove").text("Х - move: " + posMouse.x2 + "; ");                    
                            $("#yPosMouseMove").text("Y - move: " + posMouse.y2 + "; ");            
                }); 
                
            $('#myCanvas').mouseup(function (e) 
                {
                    posMouse.paint = false;               
                }); 
                
            $('#myCanvas').mouseleave(function (e) 
                {
                    posMouse.paint = false;               
                });  
Paint Basic Line in Canvas
===

Please help fix the problem. Now lines are drawn to something like a "fan". But I need the lines were drawn in a standard graphics editor. I am where there were mistakes in the transfer of coordinates in the function. But I can not understand where ...

Thank you all for your help.
    
 

    var canvas = document.getElementById("myCanvas"); 
            var context = canvas.getContext("2d");
        
            canvas.width  = 640;
            canvas.height = 480;
        
            var posMouse = {};
            posMouse.paint = false;
        
            $('#myCanvas').mousedown(function (e) 
                {
                    posMouse.paint = true;
                               
                    posMouse.x1 = e.pageX - this.offsetLeft;
                    posMouse.y1 = e.pageY - this.offsetTop;         
        
                    $("#xPosMouseDown").text("Х - down: " + posMouse.x1 + "; ");                    
                    $("#yPosMouseDown").text("Y - down: " + posMouse.y1 + "; ");                       
                });
                
            $('#myCanvas').mousemove(function (e) 
                {           
                    if (posMouse.paint == false){return false;}
        
                            posMouse.x2 = e.pageX - this.offsetLeft;
                            posMouse.y2 = e.pageY - this.offsetTop;
             
                            context.beginPath();
                            context.moveTo(posMouse.x1, posMouse.y1);        
                            context.lineTo(posMouse.x2, posMouse.y2);                                    
                            context.stroke();
                            context.closePath();
                            
                            $("#xPosMouseMove").text("Х - move: " + posMouse.x2 + "; ");                    
                            $("#yPosMouseMove").text("Y - move: " + posMouse.y2 + "; ");            
                }); 
                
            $('#myCanvas').mouseup(function (e) 
                {
                    posMouse.paint = false;               
                }); 
                
            $('#myCanvas').mouseleave(function (e) 
                {
                    posMouse.paint = false;               
                });  