画布上的鼠标位置

Question

下面的代码正确绘制,但它绘制到错误的坐标.它应该绘制鼠标所在的位置.我无法发现我的错误.谢谢.

的jsfiddle

container.mousedown(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    context_temp.beginPath();
    context_temp.moveTo(x, y);
    started = true;
});

container.mousemove(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    if (started) {
        context_temp.lineTo(x, y);
        context_temp.stroke();
    }
});

container.mouseup(function(e) {

    var parentOffset = $(this).offset(); 
    var x = e.pageX - parentOffset.left;
    var y = e.pageY - parentOffset.top;

    if (started) {
        container.mousemove(x, y);
        started = false;
        update();
    }
});

Answer 1

您在CSS中设置画布宽度和高度.这只是拉伸画布和图像一样.

效果正在错误的地方.

相反,您需要在标签本身上设置画布尺寸:

<canvas width="400" height="400"></canvas>