捕获隐藏/遮挡文本区域上的鼠标事件

Question

我想要在画布上有一个圆形文本区域，所以我正在做的是将文本区域放置在画布后面，然后

<textarea cols="40" rows="20" name="textArea" id="textArea">
    Inside
</textarea>

使用或多或少的以下代码在画布上创建一个“洞”，以便可以看到文本

ctx.fillStyle = '#000';
ctx.fillRect(0,0,500,500);
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(250,250,250-5, 0, Math.PI*2, true);
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.closePath();

并且，如果任何人都觉得它有用，这是我正在使用的 CSS 代码

canvas {
    border: 0px solid yellow;
    left: 0px;
    top: 0px;
    position: absolute;
}
textArea {
    border: 0px solid yellow;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: -1; 
    color: orange; 
    background-color: blue; 
    border-width: 0px; 
    text-align: center; 
    font-size: x-large
}

然后，我显然更改了填充，使文本显示为圆形。一切正常，除了文本区域没有捕获任何事件（鼠标单击、动作、按键......），这是可以理解的。我的问题是如何打开这些事件。

Answer 1

我想说的是 canvas 位于 textarea 上方，在这种情况下，canvas 会捕获事件。

您可以手动将它们发送到 textarea ，但这会出现问题。有些会更容易，但是......

document.getElementById('my-canvas').click = function() {
    document.getElementById('textaArea').focus();
}