JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvasMain"></canvas>
<canvas id="canvasBall"></canvas>

CSS

canvas {
    border: 1px dotted;
    padding: 4px;
}

JavaScript

var canvasMain = document.querySelector("#canvasMain");
var canvasBall = document.querySelector("#canvasBall");

var mctx = canvasMain.getContext("2d");
var bctx = canvasBall.getContext("2d");

bctx.arc(35, 35, 35, 0, Math.PI * 2, true);
bctx.fill();

mctx.drawImage(canvasBall, 0, 0); //115, 35);

canvasBall.addEventListener("mousemove", function(event) {
    var x = event.pageX - canvasBall.offsetLeft - 5;
    var y = event.pageY - canvasBall.offsetTop - 5;
    var ipip = bctx.isPointInPath(x, y);
    console.log("id:", canvasBall.id, "x:", x, "y:", y, "isMouseInPath:", ipip);
}, false);

canvasMain.addEventListener("mousemove", function(event) {
    var x = event.pageX - canvasMain.offsetLeft - 5;
    var y = event.pageY - canvasMain.offsetTop - 5;
    var ipip = mctx.isPointInPath(x, y);
    console.log("id:", canvasMain.id, "x:", x, "y:", y, "isMouseInPath:",ipip);
}, false);