# How to access bottom canvas layer in HTML?

I have such html:

<div id="main_window">
<canvas id="canvas_hex_logic" width="200" height="100"></canvas>
<canvas id="canvas_ground" width="200" height="100"></canvas>
</div>


and css:

#canvas_hex_logic{
position: absolute;
top:31px;
left:201px;
z-index: 0;
}
#canvas_ground{
position: absolute;
top:31px;
left:201px;
z-index: 1;
}


in #canvas_hex_logic I'm rendering mask for my hexagons:

over it I'm placing ground layer:

part of JS code, for picking color under mouse:

  ..... mouse event handler above .....
var c_hex = document.getElementById("canvas_hex_logic");
var ctx_hex = c_hex.getContext("2d");
..... ..... ..... ..... ..... .....
var color = ctx_hex.getImageData(mouseX, mouseY, 1, 1).data;


This code working, if #canvas_hex_logic is on tom of other layers.

So, question is - how to pick color under mouse from #canvas_hex_logic layer when it is overlayed with another layer?

Thanks!

#canvas_ground {
left: 201px;
pointer-events: none;  <<--------- this helps
position: absolute;
top: 31px;
z-index: 1;
}

• If you're planning to make this game playable on multiple browsers (especially IE), pointer-events: none might not work. See canIUse. – Steven Lambert Nov 18 '14 at 20:10

Your issue comes from the fact that your 'hex' canvas is hidden by your 'ground' canvas, and do not receive the mouse events.

But in fact you don't care from which canvas the click event was raised : just have your mouse handling code hook the events of the top-most canvas, and use those coordinates.

(I assume here that all canvases have the same size and do completely overlap. By the way you might want to put all the canvas within a single div with absolute positioning of the canvas (left,top)=(0px,0px). It'll be easier to later add canvases.)