Capture mouse events on hidden/occluded text area

I want a circular text area in the canvas so what I am doing is placing the text area behind the canvas like so

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

then using more or less the following code to create a 'hole' in the canvas so the text can be seen

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();

And, if anyone finds it useful, here is the CSS code I am using

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
}

Then, I obviously change the padding so the text appears circular. Everything works, except the text area is not capturing any events (mouse click, motion, key press..), which is understandable. My question is how do I turn those events on.

I'd say you have the canvas above the textarea, in which case, events are being captured by the canvas.

You could send them to the textarea manually but this will be problematic. Some will be easier, however...

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