JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width=600 height=600 ></canvas>

JavaScript

canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');

myimage = new Image();
myimage.src = 'https://i.postimg.cc/SNjPPZGJ/farms-map.png';
myimage.onload = draw


const rect = canvas.getBoundingClientRect();
const polypoints = [{x: 200, y: 29}, {x: 500, y: 19}, {x: 465, y: 146}, {x: 130, y: 150}];
var polyColor = "blue"
var dragPoint = null;

draw();
canvas.addEventListener('mousedown', onMouseDown);
canvas.addEventListener('mousemove', function(evt) {
	console.log(evt.clientY, window.scrollY)
  if (inside({x:evt.clientX - rect.left, y:(evt.clientY + window.scrollY) - rect.top}, polypoints)){
  	polyColor = "red"
  } else {
  	polyColor = "blue"
  }
  draw()
}, false);

function inside(p, vs) {
    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i].x, yi = vs[i].y;
        var xj = vs[j].x, yj = vs[j].y;
        var intersect = ((yi > p.y) != (yj > p.y)) && (p.x < (xj - xi) * (p.y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
    return inside;
};


function draw() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (myimage) {
	  ctx.drawImage(myimage, 1, 1)  
  }
  drawLines();
  polypoints.forEach(p => drawPoint(p));
}


function drawPoint(p) {
  ctx.beginPath();
  ctx.globalAlpha = 1
  ctx.fillStyle = "black";
  ctx.lineWidth = 2;
  ctx.arc(p.x, p.y, 5, 0, 2 * Math.PI, false);
  ctx.stroke();
  ctx.fill();
}

function drawLines() {
  ctx.beginPath();
  ctx.lineWidth = 2;
  polypoints.forEach(p => ctx.lineTo(p.x, p.y));
  ctx.lineTo(polypoints[0].x, polypoints[0].y)
  ctx.stroke();
  if (!dragPoint) {
    ctx.globalAlpha = 0.2
    ctx.fillStyle = polyColor;
    ctx.fill();
  }
}

function findDragPoint(x, y) {
  for (i = 0; i < polypoints.length; i++) {
    if (hitTest(polypoints[i], x, y)) return polypoints[i];
  };
  return null;
}

function onMouseDown(event) {
  dragPoint = findDragPoint(event.clientX - canvas.offsetLeft, event.clientY -...