javascript - 如何访问HTML中的底部 Canvas 层？

我有这样的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>

和CSS：

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

在#canvas_hex_logic中，我正在渲染六边形的蒙版：


在它上面我放置了地面层：



JS代码的一部分，用于在鼠标下拾取颜色：

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

如果#canvas_hex_logic在其他层的tom上，则此代码有效。

因此，问题是-当#canvas_hex_logic层与另一层覆盖时，如何从鼠标下选择颜色？

谢谢！

最佳答案

谢谢！
敏锐度，我已经建立了最简单的方法：

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