JSFiddle - React, Tailwind, and code Playground

by indatawetrust

HTML

<canvas width="200" height="200"></canvas>

JavaScript

// http://alienryderflex.com/polygon/

const canvas = document.querySelector('canvas'),
			c = canvas.getContext('2d')
      
let points = []

function star(k) {
	c.clearRect(0,0,200,200)
  for(let i=0;i<k;i++){
    points.push({
      x : 100 * Math.sin(Math.PI*(i*(360/k)/180))+100,
      y : 100 * Math.cos(Math.PI*(i*(360/k)/180))+100,
    })
  }
	c.beginPath()
  c.moveTo(points[0].x,points[0].y)
  for(let i=1;i<k;i++){
    c.lineTo(points[i].x,points[i].y)
  }
	c.closePath()
  c.stroke()
}

let i = 8,k = 1

function polygon(x,y) {

  let j = points.length-1
  let oddNodes = false

  for (i=0; i<points.length; i++) {
    if ((points[i].y< y && points[j].y>=y
    ||   points[j].y< y && points[i].y>=y)
    &&  (points[i].x<=x || points[j].x<=x)) {
      oddNodes^=(points[i].x+(y-points[i].y)/(points[j].y-points[i].y)*(points[j].x-points[i].x)<x); }
    j=i; }

  return oddNodes; }

star(i)

canvas.addEventListener('mousemove',(e) => {
	c.clearRect(0,0,200,200)
  
  points = []
  star(i)
  
	if(polygon(e.clientX-8,e.clientY-8)){
  	c.font = '10px Monospace'
    c.fillText('touch',e.clientX-20,e.clientY-10)
  }else{
  	c.font = '10px Monospace'
    c.fillText('not touch',e.clientX-20,e.clientY-10)
  }
})