Javascript HTML5 Canvas draw path issue

Question

приведенный ниже код работает, за исключением того, что он рисует линию около 100 пикселей ниже координат мыши, иногда, когда я обновляю Chrome (или firefox), проблема либо исправляет себя, либо не работает на все! Может ли кто-нибудь объяснить мне, что может быть проблемой?

Спасибо!

function setXAndYOne (newX, newY) { 
    x = newX; 
    y = newY; 
    } 

function setXAndYTwo (newX, newY) { 
    x = x2; 
    y = y2; 
    x2 = newX; 
    y2 = newY; 
    } 

    function drawingMouseDown (event) { 
    setXAndYOne(event.pageX - offset.left, event.pageY - offset.top); 
    isMousedown = true; 
    } 

    function drawingMouseMove (event) { 
    setXAndYTwo(event.pageX - offset.left, event.pageY - offset.top); 
    if (isMousedown) draw(); 
    } 

    function drawingMouseUp (event) { 
    isMousedown = false; 
    } 
    var ctx = drawingContext; 

    function draw() { 

    ctx.strokeStyle = currentColour; 
    ctx.lineJoin = "round"; 
    ctx.lineWidth = 5/*strokeWidth*/; 
    ctx.beginPath(); 
    ctx.moveTo(x,y); 
    ctx.lineTo(x2, y2); 
    ctx.stroke(); 
    } 

Answer 1

Предвыборка коробка холст ограничивающего (ограничивающий прямоугольник == положение холста относительно страницы).

var BB=canvas.getBoundingClientRect(); 
var BBoffsetX=BB.left; 
var BBoffsetY=BB.top; 

Затем в обработчиках мыши вы можете получить постион мыши, как это:

var mouseX=event.clientX-BBoffsetX; 
var mouseY=event.clientY-BBoffsetY;