JSFiddle - React, Tailwind, and code Playground

HTML

<span id="result">move your mouse</span>
<div class="underneath">underneath 1</div>
<div class="underneath">underneath 2</div>
<canvas>front</canvas>

CSS

.underneath, canvas {
    opacity: .5;
    width: 6em;
    padding: 1em;
    margin: 1em;
    background-color: yellow;
    position: relative;
    left: 8em;
    top: 4em;
}
canvas {
    left: 1em;
    top: -4em;
    width: 12em;
    height: 5em;
    background-color: green;
    box-shadow: 0 0 30px 3px black;
}

#result {
    position: absolute;
}

JavaScript

var context = $("canvas")[0].getContext("2d");
context.font = "25px Arial";
context.fillText("canvas in front", 5, 80);

$(".underneath").mouseover(function () {
    $("#result").text("mouse is over " + $(this).text());
});

$("canvas").mousemove(function (event) {
    if (document.elementFromPoint) {
        var $canvas = $(this);
        // hide canvas visibility
        // don't do display:none as we want to maintain canvas layout
        $canvas.css('visibility', 'hidden');
        // get the element underneath, if any
        var $under = $(document.elementFromPoint(event.clientX, event.clientY));
        // show again the canvas
        $canvas.css('visibility', 'visible');
        if ($under.hasClass('underneath')) { 
           $under.triggerHandler('mouseover');
        } else {
            $("#result").text("mouse is over the canvas");
        }
    }
}).add($(".underneath")).mouseleave(function () {
    $("#result").text("");
});