How to catch mouse-up event outside of element?
If you want to catch the mouseup event somewhere else in the document, you might add an event handler for this to the documentelement. Note that this won't react on mouseup events outside the viewport, so you might want to fire also when the mouse enters the viewport again without a pressed button.
If you want to catch the mouse leaving your canvas element, it gets a bit more complicated. While IE knows a mouseleave event, the standard DOM has a mouseout event that also fires when a descendant of your element is left (although canvas usually has no child elements). Read more on that at quirksmode.org.
I have created a fiddle to demonstrate the behaviour (works only with W3 DOM). You might try to change documentelement to body. In Opera, the mouseup listener on <html> event detects mouseup events outside the document when the "drag" began inside it - I do not know whether that is standard behaviour.
window.addEventListener('mouseup', function(event){
// do logic here
})
It handle releasing mouse even outside of browser