Как сохранить холст в фокусе

Question

Я делаю приложение для рисования изображений с помощью html и javascript. Я сделал это с холстом и добавил несколько кнопок (<div> s) на холст. Конечно, на холсте есть onmousedown, onmouseup, onmousemove обработчики рисовать линии. Но когда я перемещаю мышь в положение кнопок или из холста, возвращаюсь в область холста, разрывы строк. см. Код (http://jsfiddle.net/coldmund/MQKMv/) пожалуйста.

HTML:

<div> 
    <div style="position: absolute; margin-top: 0px; margin-left: 0px;"><canvas id="canvas" width="500" height="300" onmousedown="down(event)" onmouseup="up()" onmousemove="move(event)" style="border: 1px solid"></canvas></div> 
    <div style="position: absolute; margin-top: 100px; margin-left: 100px; width: 100px; height: 100px; background: #ff0000; opacity: 0.5"></div> 
</div> 

ЯШИ:

var mouseDown = false; 
down = function(e) 
{ 
    mouseDown = true; 
    prevX = e.clientX; 
    prevY = e.clientY; 
}; 

up = function() 
{ 
    mouseDown = false; 
}; 

move = function(e) 
{ 
    if(mouseDown === false) 
     return; 

    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    context.lineWidth = 5; 
    context.lineCap = 'round'; 

    context.beginPath(); 
    context.moveTo(prevX, prevY); 
    context.lineTo(e.clientX, e.clientY); 
    context.stroke(); 

    prevX = e.clientX; 
    prevY = e.clientY; 
}; 

Answer 1

Вот скрипка с потенциальным решением (fiddle). Это в основном переключает свойства кнопок css на pointer-events:none при рисовании на холсте.

Различия между вашим кодом и моим в основном сводятся к следующему:

// CSS 
.no-pointer-events { 
    pointer-events:none; 
} 

// Inside the mousedown handler 
document.getElementById("button1").class = "no-pointer-events"; 

// Inside the mouseup handler 
document.getElementById("button1").class = "";