Javascript 如何使画布对眼睛不可见，但对鼠标移动事件不可见？

我在画布中有一些彩色线条，我使用

mousemove

事件扫描这些线条，该事件返回线条的十六进制颜色代码。 我是否可以让这个画布肉眼看不见，但当指针经过画布时，仍然返回正确的颜色代码

我已尝试将上下文的

globalAlpha

设置为透明或接近透明（0，0.1…），但结果不一：

• 在Firefox中，由于透明度的原因，收集到的十六进制返回一个改变的颜色
• 在Chrome中，无论透明度如何，它都会返回正确的颜色（这实际上是我想要的行为）

奇怪的是，在我的原始代码中，甚至在Chrome中，

globalAlpha=0

的画布行不再返回其原始颜色

---

有人能解释一下globalAlpha的预期行为吗？更重要的是，是否有其他方法可以使画布肉眼看不见，但仍然可以通过鼠标事件收集颜色？感谢您的帮助

将CSS属性

不透明度设置为
0

将属性应用于画布时，如

#examplecanvas {
  opacity: 0;
}

它将从屏幕上消失，但当您将鼠标移到它上面（或单击它）时仍能检测到颜色。
这正是我所需要的，非常感谢！我在代码中将CSS不透明度设置为canvas类时遇到了一些冲突（可能被父类或其他什么覆盖了？），但是使用您建议的ID效果很好。再次感谢：）