Question

I got three HTML5 canvas elements. One is transparent and completely covers the other two, that are not overlapping (What I draw on it must be superimposed, so its z-index must be the highest).

The problem is that the topmost one (overlay_area) prevents the other two receiving events. I don’t need events to be received by the topmost one, so

• Is there a way to stop the topmost canvas receiving events?
• if not, is there a way to pass the events to the bottom canvases?

For this project, I need to use hammer.js and no jquery.

<canvas id="overlay_area"
        style="z-index: 8; position:absolute; left:0px; top:35px;"
        height="762px" width="968px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

    <canvas id="wave_area"
        style="z-index: 5;
        position:absolute;
        left:0px;
        top:35px;"
        height="762px" width="200px">
        This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

    <canvas id="edit_area"
        style="z-index: 5;
        position:absolute;
        left:200px;
        top:35px;"
        height="762px" width="768px">
        This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>

Answer 1

Theres a few ways to achieve this like Frederic points out in his answer. Another way to ignore mouse events on an element is to assign the following style.

pointer-events:none;

Its well decently supported and works great.

Live Demo

So in your case it would be

<canvas id="overlay_area"
    style="z-index: 8; position:absolute; left:0px; top:35px; pointer-events:none;"
    height="762px" width="968px">
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>