JSFiddle - React, Tailwind, and code Playground
by Shashank D
HTML
<canvas id="canvas" width="600" height="650"></canvas>JavaScript
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
const path = new Path2D;
path.rect(0,0,100,100);
// declare the path
ctx.translate(50, 50);
ctx.fillStyle = "green";
ctx.fill(path);
// using fixed values
const x = 495;
const y = 505;
console.log(ctx.isPointInPath(path,x,y));
// reset to identity matrix
ctx.setTransform(1,0,0,1,0,0);
ctx.fillStyle = "red";
ctx.fillRect(x-2,y-2,4,4);
document.onmousemove = function (e) {
console.log(ctx.isPointInPath(path,e.offsetX, e.offsetY));
}