TAG
CSS
JavaScript
Result
Run
<h3>Please click to the path.</h3> <canvas id="mycanvas" width="200" height="100"></canvas>
#mycanvas { border: 1px solid #CCC; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); const newRect = new Path2D(); newRect.rect(30, 20, 100, 60); context.fill(newRect); elCanvas.addEventListener("click", e => { if(context.isPointInPath(newRect, e.offsetX, e.offsetY)) { console.log("Clicked in the path."); } else { console.log("Clicked outside the path."); } }); });
Console
expand_less