JSFiddle - React, Tailwind, and code Playground

by MikeEast

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

function pnpoly(nvert, vertx, verty, testx, testy)
{
  var i, j;
  for (i = 0, j = nvert-1; i < nvert; j = i++) {
      var a = ((verty[i] > testy) != (verty[j] > testy));
      var b = (testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]);
    if ( a && b )
       return true;
  }
  return false;
}
function pnpoly2(points, x, y) {
    var i, j, n = 6;
    for (i = 0, j = n-1; i < n; j = i++) {
        var a = ((points[i].y > y) != (points[j].y > y));
        var b = (x < (points[j].x - points[i].x) * (y - points[i].y) / (points[j].y - points[i].y) + points[i].x);
    if ( a && b )
       return true;
    }
    return false;
}

var xs = [0, 20, 30, 20, 0, 10];
var ys = [0, 0, 10, 20, 20, 10];
console.clear();
var hit = pnpoly(6, xs, ys, 1, 1); console.log(hit);
var hit = pnpoly(6, xs, ys, 31, 10); console.log(hit);
var hit = pnpoly(6, xs, ys, 29, 10); console.log(hit);

var points = [];
for(var x in xs) {
    points.push(
        {
            'x': xs[x],
            'y': ys[x]
        }
    );
}
console.log(points);
var hit = pnpoly2(points, 1, 1); console.log(hit);
var hit = pnpoly2(points, 31, 10); console.log(hit);
var hit = pnpoly2(points, 29, 10); console.log(hit);

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

var shape = function() {
    var self = this;
    self.context = null;
    self.points = [];
    self.draw = function() {
        self.context.moveTo(points[0].x, points[0].y);
        for(var i = 1; i < points.length; i++) {
            self.context.lineTo(points[i].x, points[i].y);
        }
        self.context.closePath();
        self.context.stroke();
    };
    self.markOver = function() {
        self.draw();
        self.context.fill();
    };
    self.markOut = function() {
        self.draw();
        self.context.fill();
    };
};

var arrow = new shape();
arrow.points = points;
arrow.context = ctx;

c.shapes = [];
c.shapes.push(arrow);

var check = function(e) {
    for(var shape in...