5

I currently have three canvases layered on top of each other by z-index.

<canvas width="800" height="600" id="test3_canvas" style="position: absolute; left: 0; top: 0; z-index:2"></canvas>

<canvas width = "800" height="600" id="test2_canvas" style="position: absolute; left: 0; top: 0;z-index:1"></canvas>

<canvas width="800" height="600" id="test1_canvas" style="position: absolute; left:0; top: 0;z-index:0"></canvas>

But only the top layer canvas(z-index:2) seems to be catching the mousedown/mouseup/mousemove events I've set up. Is there a way to ensure that the other layers also catch the events?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Leah Xue
  • 625
  • 1
  • 7
  • 11

3 Answers3

6

Even though this setup seems weird, I think you could put the handler on a div outside the canvases and then have that event call whatever you need for each canvas. The top layer is going to catch the mouse event otherwise.

Jarrett Widman
  • 6,329
  • 4
  • 23
  • 32
2

No, there's not a way to do that. Generally the mouse event model is that the topmost layer "catches" the mouse interaction, and elements underneath that element in the rendering of the document just don't get any event at all. With ordinary HTML markup it's often possible to arrange the page design such that your "stack" of elements are lexically nested in the markup, in which case the browser will bubble the events through the element ancestry. With canvas elements, however, you can't really do that.

edit — look at @jarrett's answer

Pointy
  • 405,095
  • 59
  • 585
  • 614
2

You don't need to catch the backward layers, they are the same size, so you only need to get the events for one and map it to in the others.

Edit: Or why not drawing on only one canvas?

Eric Fortis
  • 16,372
  • 6
  • 41
  • 62