Как мне обеспечить надежное уведомление о mouseup?

Question

Цель состоит в том, чтобы получать достоверные уведомления о событиях mouseup. В качестве конкретного примера, когда вы щелкнете левой кнопкой мыши, облако должно стать красным, а когда вы отпустите кнопку, оно станет синим.

Эта скрипка в основном работает:

canvas.addEventListener("mousedown", function(e) {
    if (e.button === 0) {
        drawShape("#FF69B4", "red");
    }
});
canvas.addEventListener("mouseup", function(e) {
    if (e.button === 0) {
        drawShape("#8ED6FF", "blue");
    }
});
window.addEventListener("mouseup", function(e) {
    if (e.button === 0) {
        drawShape("#8ED6FF", "blue");
    }
}, true);

https://jsfiddle.net/f1x6vc0c/1/

БОЛЬШОЕ ЗЛО, которое остается, это КОНТЕКСТНОЕ МЕНЮ. Если вы щелкнете по облаку, перетащите его куда угодно, затем щелкните правой кнопкой мыши, чтобы получить контекстное меню, а затем отпустите левую кнопку мыши, пока присутствует контекстное меню, что mouseup навсегда потеряно. Конечно, я мог бы отключить контекстное меню, но только на страницах, которыми я управляю - обратите внимание, что такое же неправильное поведение происходит, если вы активируете контекстное меню в каком-то другом приложении за пределами окна браузера. Итак, как мне получить уведомление даже в этом случае? в кросс-браузерной манере?

(не стесняйтесь игнорировать IE до 9 и аналогично старшим браузерам)