JSFiddle - React, Tailwind, and code Playground
by devdev
HTML
<!doctype html>
<title>canvas API</title>
<meta charset="utf-8">
<p>point over line check, point over rectangle check</p>
<canvas id="canvas1">
<script>
c=document.getElementById("canvas1")
ctx = c.getContext("2d")
drawLine(()=>'yellow')
drawRect(()=>'pink')
c.onclick = c.onmousemove = function(e) {
rect = this.getBoundingClientRect()
x = e.clientX-rect.left
y = e.clientY-rect.top
ctx.clearRect(0, 0, c.width, c.height)
drawLine(()=>ctx.isPointInStroke(x, y)?'maroon':'pink')
drawRect(()=>ctx.isPointInPath(x, y)?'maroon':'yellow')
}
function drawLine(color){
ctx.lineWidth=20
ctx.beginPath()
ctx.moveTo(0, 0)
ctx.lineTo(300, 150)
ctx.strokeStyle = color()
ctx.stroke()
}
function drawRect(color){
ctx.lineWidth=1
ctx.beginPath()
ctx.rect(50, 50, 150, 100)
ctx.fillStyle = color()
ctx.fill()
}
</script>