)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

isPointInPath Canvas

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3. let mouseX = 0, mouseY = 0;
  4.  
  5. canvas.width = 400;
  6. canvas.height = 400;
  7. document.body.appendChild(canvas);
  8. document.body.style.margin = 0;
  9.  
  10. c.fillStyle = 'black';
  11. c.fillRect(0, 0, canvas.width, canvas.height);
  12.  
  13. document.addEventListener('mousemove', e => {
  14.   mouseX = e.clientX;
  15.   mouseY = e.clientY;
  16. });
  17.  
  18. // no scroll on mobile: 
  19. document.addEventListener('touchmove', 
  20.   e => e.preventDefault(), { passive: false });
  21.  
  22. document.addEventListener('touchmove', e => {
  23.   mouseX = e.touches[0].clientX;
  24.   mouseY = e.touches[0].clientY;
  25. });
  26.  
  27. const loop = () => {
  28.   c.fillStyle = 'black';
  29.   c.fillRect(0, 0, canvas.width, canvas.height); 	
  30.   c.lineWidth = 3;
  31.   c.strokeStyle = 'blue';
  32.   c.beginPath();
  33.   c.moveTo(20, 20);
  34.   c.lineTo(110, 20);
  35.   c.lineTo(110, 110);
  36.   c.lineTo(20, 110);
  37.   c.closePath();
  38.  
  39.   if (c.isPointInPath(mouseX, mouseY)) {
  40.     c.strokeStyle = 'white';
  41.     c.fillStyle = 'red';
  42.     c.fill();
  43.   }
  44.   c.stroke();
  45.  
  46.   requestAnimationFrame(loop);
  47. };
  48.  
  49. loop();

See if a point is with a path inside canvas. Take a look at MDN for more info.

snippet.zone ~ 2021-22 /// {s/z}