Catching mouse events on html5 canvas when placed in the background

Question

I placed the html5 canvas in the background using the following style="position:fixed;top:0;left:0;z-index:-1;"

On my window.onload(), I am adding a mouse event listener to the canvas as follows canvas.addEventListener('mousemove', onMouseMove, false) but unfortunately my canvas is not receiving any mouse events. How do you propagate events down the z-axis? Is it possible to do it without using any external library(if exist)?

I tried searching for it but couldn't found anything relevant so far.

scessor scessor · Accepted Answer · 2012-06-03T12:00:54

You want to "bubble" a mousemove event from a none-fixed element to a fixed element with different parents? I think you have to check and trigger for your own:

Build a wrapper for the none fixed element(s). This gets also a mousemove event listener. If the mousemove is over the fixed element (check clientX and clientY), trigger the mousemove event on the fixed element.

E.g. tested with firefox:

function onCanvasMouseMove(oEvent) {
    console.log(oEvent);
}

// wrapper mousemove handler: 
// if the mouse is over the canvas, trigger mousemove event on it.
function onWrapperMouseMove(oEvent) {
    if (
        oEvent.clientX <= oCanvas.offsetWidth
        && oEvent.clientY <= oCanvas.offsetHeight
    ) {
        oEvent.stopPropagation();
        var oNewEvent = document.createEvent("MouseEvents");
        oNewEvent.initMouseEvent("mousemove", true, true, window, 0, oEvent.screenX, oEvent.screenY, oEvent.clientX, oEvent.clientY, false, false, false, false, 0, null);
        oCanvas.dispatchEvent(oNewEvent);
    }
}

var oCanvas;

window.onload = function() {
    oCanvas = document.getElementById('canvas');
    oCanvas.addEventListener('mousemove', onCanvasMouseMove, false);
    // add mousemove listener to none-fixed wrapper
    var oWrapper = document.getElementById('wrapper');
    oWrapper.addEventListener('mousemove', onWrapperMouseMove, false);
};

Also see this example.

P.s.: bubbling is not the right word, it normaly means bubbling the event to the parent elements.

Catching mouse events on html5 canvas when placed in the background

2 Answers