JSFiddle - React, Tailwind, and code Playground

HTML

<div id='mydiv'>
    <div style="position: absolute; left: 0; top: 0; width: 300; height: 300; z-index: 100">Hello</div>
    <canvas style="position: absolute; left: 0; top: 0; width: 300; height: 300"></canvas>
</div>

JavaScript

var canvas = $('canvas'); /* jQuery reference to the <canvas> */
var canvasWidth = canvas.outerWidth();
var canvasHeight = canvas.outerHeight();

function isCanvasClicked(x, y, target) {
    if (target.tagName === 'CANVAS') return true;
    var offset = canvas.offset(),
        left = offset.left,
        top = offset.top;

    return x >= left && x <= left + canvasWidth &&
           y >= top && y <= top + canvasHeight;              
}

$('#mydiv').on('mousedown', '*', this, function(ev) {
    if (isCanvasClicked(ev.pageX, ev.pageY, ev.target)) {
        alert('here');
    }
});