let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// head
ctx.beginPath();
ctx.arc(100, 100, 75, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.stroke();
// eyes
ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.arc(130, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
try
{
ctx.addHitRegion({id: "eyes"}); // NO SUPPORT => Exception
// mouth :-)
ctx.beginPath();
ctx.arc(100, 110, 50, 0, Math.PI, false);
ctx.stroke();
}
catch
{
// mouth :-(
ctx.beginPath();
ctx.arc(100, 160, 40, Math.PI, 0, false);
ctx.stroke();
}
canvas.addEventListener('mousemove', function(event) {
if (event.region) {
alert('hit region: ' + event.region);
}
});
<canvas id="canvas"></canvas>