Javascript 多个画布作为层

我在html页面中使用多个画布作为层，如中所示，但我遇到了一些问题。如果我画出来

<canvas id="overlay"></canvas>
<canvas id="widget"></canvas>

---

有人遇到过这个问题吗？我做错什么了吗

我刚发现。问题出在另一段代码中。我只在“mousemove”事件上绘制覆盖图，但我在监听小部件mousemove事件

// WRONG: widget.addEventListener('mousemove', drawOverlay);
overlay.addEventListener('mousemove', drawOverlay);

---

因此，当小部件位于后面时，鼠标移动事件未被调度

为什么不使用像Kinetic这样的第三方库来为您处理这些东西呢？您能提供一个js提琴来证明您的问题吗？

// overlay 
ctx.clearRect(0, 0, overlay.width, overlay.height);
ctx.beginPath();
ctx.moveTo(0, 25);
ctx.lineTo(0, 200);
ctx.stroke();

// widget
ctx.clearRect(0, 0, widget.width, widget.height);

// WRONG: widget.addEventListener('mousemove', drawOverlay);
overlay.addEventListener('mousemove', drawOverlay);