可绘制的画布呈现错误位置的线条

Question

我正在尝试创建一个用户可以绘制的画布。 但是，我遇到了一些问题，我无法理解他们为什么首先发生。

距离画布原点（0,0）越远，画出的线越远。有什么不对，但我似乎无法弄清楚什么。

我已经准备了一个用的jsfiddle我使用clientX/clientY而不是pageX属性和pageY试图问题here

$(canvas).on('mousedown', handlePress); 
$(canvas).on('mousemove', handleMove); 
$(canvas).on('mouseup', handleRelease); 

function handlePress(e){ 
    drawing = true;  
    startx = e.pageX - this.offsetLeft; 
    starty = e.pageY - this.offsetTop; 
} 

function handleMove(e){ 
    if (drawing){ 
     var newX = e.pageX - this.offsetLeft, 
      newY = e.pageY - this.offsetTop; 

     ctx.beginPath(); 
     ctx.moveTo(startx, starty); 
     ctx.lineTo(newX, newY); 
     ctx.stroke(); 

     startx = newX; 
     starty = newY; 
    } 
} 

function handleRelease(e){ 
    drawing = false; 
} 

的一个例子，但具有相同的结果。

Answer 1

我能解决这个问题，显然画布比渲染时大。我已经在CSS中指定了大小，但为了工作，我需要在html中指定canvas元素的宽度和高度属性。