JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>

JavaScript

//--------------------------------                                  
// edge detection code from this post http://stackoverflow.com/a/15308571/1104148
//--------------------------------

function Vec2(x, y) {
    return [x, y]
}
Vec2.nsub = function (v1, v2) {
    return Vec2(v1[0] - v2[0], v1[1] - v2[1])
}
// aka the "scalar cross product"
Vec2.perpdot = function (v1, v2) {
    return v1[0] * v2[1] - v1[1] * v2[0]
}
// Determine if a point is inside a polygon.
//
// point     - A Vec2 (2-element Array).
// polyVerts - Array of Vec2's (2-element Arrays). The vertices that make
//             up the polygon, in clockwise order around the polygon.
//
function coordsAreInside(point, polyVerts) {
    var i, len, v1, v2, edge, x
    // First translate the polygon so that `point` is the origin. Then, for each
    // edge, get the angle between two vectors: 1) the edge vector and 2) the
    // vector of the first vertex of the edge. If all of the angles are the same
    // sign (which is negative since they will be counter-clockwise) then the
    // point is inside the polygon; otherwise, the point is outside.
    for (i = 0, len = polyVerts.length; i < len; i++) {
        v1 = Vec2.nsub(polyVerts[i], point)
        v2 = Vec2.nsub(polyVerts[i + 1 > len - 1 ? 0 : i + 1], point)
        edge = Vec2.nsub(v1, v2)
        // Note that we could also do this by using the normal + dot product
        x = Vec2.perpdot(edge, v1)
        // If the point lies directly on an edge then count it as in the polygon
        if (x < 0) {
            return false
        }
    }
    return true
}
//--------------------------------                                  



// POLYGONS

var poly1 = [ // this one works
    [156, 85],
    [283, 82],
    [304, 154],
    [276, 183],
    [202, 197],
    [142, 147],
    [140, 118]
];
function poly1draw() {
    ctx.beginPath();
    ctx.moveTo(156, 85)
    ctx.lineTo(283, 82);
    ctx.lineTo(304, 154);
    ctx.lineTo(276, 183);
    ctx.lineTo(202, 197);
...