Javascript 使用鼠标移动绘制鼠标点的直线方式

我正在做一个我想在画布上画画的项目。 我在mouseover上获得了draw方法，并打算在跟随鼠标的同时画一条线。 它完美地画出了这条线，但不是在正确的位置上

它可能是bijquery

var canvas = document.getElementById('myCanvas');
 ctx = canvas.getContext('2d');  
ctx.beginPath();  
$("#myCanvas").mousemove(function(arg)
                {   ctx.lineTo(arg.pageX,arg.pageY-80);
                    ctx.stroke();
                });

我的html画布代码：

    <canvas id="myCanvas" width="500" height="500">

 </canvas>

---

我希望这是可以理解的，有人可以帮助我。（pageY中的-80信息是因为我在屏幕上比在画布上工作得更好）

这里有一种读取鼠标相对于画布位置的可选方法：

$("#myCanvas").mousemove(function(arg) {
    var pos = getMousePos(canvas, arg);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
});

function getMousePos(canvas, e) {
    var rect = canvas.getBoundingClientRect();  // absolute position of canvas
    return {
        x: e.clientX - rect.left,               // make x/y relative to canvas
        y: e.clientY - rect.top
    };
}

只是一个旁注：顺便说一句，我们会发现lineTo/stroke组合出现问题，因为lineTo将添加到路径中，当您笔划时，新行以及所有其他添加的行都将被笔划。事实上，绘制的线条越多，抗锯齿像素开始出现的速度就会越慢。您可以使用beginPath和moveTo进行求解，但这超出了此问题的范围。

context.arc（mousePos.x+50，mousePos.y，5,0,2*Math.PI）；context.fill（）尝试此操作，而不是使用行