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!