可繪製的畫布呈現錯誤位置的線條

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元素的寬度和高度屬性。