Canvas mouse event issue on mouseclick

Question

Trying to solve issue where when mouse leaves canvas element with mousedown; then mouse is released (mouseup) off canvas element, when mouse is moved back into canvas element it thinks mouse is still down.

The fix in this example is that mouse up and mouse down is from document rather than canvas, but then the html5 slider some how effects the canvas elements mouse input (positioning).

See here; http://coy.cat/test/a10.htm

Answer 1

Use canvas for regular events but listen to window.onmouseup instead for mouse up (in some cases you'd want this for mousemove as well).

When you're outside the canvas element the mouse won't trigger mouse events on the canvas element but the element below and on window (unless the event is prevented from bubbling up).

Simple example:

var isDown = false;  // mouse state

canvas.addEventListener('mousedown', function(e) {
    isDown = true;
    ...
}, false);

window.addEventListener('mouseup', function(e) {
    if (!isDown) return;
    if (e.preventDefault) e.preventDefault();
    isDown = false;
}, false);