2
\$\begingroup\$

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: hex logic layer

over it I'm placing ground layer:

enter image description here

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!

\$\endgroup\$
1
\$\begingroup\$

found answer:

#canvas_ground {
  left: 201px;
  pointer-events: none;  <<--------- this helps
  position: absolute;
  top: 31px;
  z-index: 1;
}
| improve this answer | |
\$\endgroup\$
  • 1
    \$\begingroup\$ If you're planning to make this game playable on multiple browsers (especially IE), pointer-events: none might not work. See canIUse. \$\endgroup\$ – Steven Lambert Nov 18 '14 at 20:10
1
\$\begingroup\$

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.)

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.