JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="Canvas" width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    var poly =[{x:150,y:150},{x:400,y:100},{x:160,y:156},{x:210,y:450}]
    var N=poly.length;
    var outer=[];
    var h=20 //distance between polygons
    var mi,mi1,li,li1,ri,ri1,si,si1,Xi1,Yi1;
    for(var i=0; i<N; i++)
    {
        mi=(poly[(i+1) % N].y - poly[i].y)/(poly[(i+1) % N].x - poly[i].x);
        mi1=(poly[(i+2) % N].y - poly[(i+1) % N].y)/(poly[(i+2) % N].x - poly[(i+1) % N].x);
        li=Math.sqrt((poly[(i+1) % N].x - poly[i].x)*(poly[(i+1) % N].x - poly[i].x)+(poly[(i+1) % N].y - poly[i].y)*(poly[(i+1) % N].y - poly[i].y));
        li1=Math.sqrt((poly[(i+2) % N].x - poly[(i+1) % N].x)*(poly[(i+2) % N].x - poly[(i+1) % N].x)+(poly[(i+2) % N].y - poly[(i+1) % N].y)*(poly[(i+2) % N].y - poly[(i+1) % N].y));
        ri=poly[i].x+h*(poly[(i+1) % N].y - poly[i].y)/li;
        ri1=poly[(i+1) % N].x+h*(poly[(i+2) % N].y - poly[(i+1) % N].y)/li1;
        si=poly[i].y-h*(poly[(i+1) % N].x - poly[i].x)/li;
        si1=poly[(i+1) % N].y-h*(poly[(i+2) % N].x - poly[(i+1) % N].x)/li1;
        Xi1=(mi1*ri1-mi*ri+si-si1)/(mi1-mi);
        Yi1=(mi*mi1*(ri1-ri)+mi1*si-mi*si1)/(mi1-mi);
        outer.push({x:Xi1,y:Yi1});
    }
    ctx.strokeStyle = "#000000";
    draw(poly);
    ctx.strokeStyle = "#FF0000";
    draw(outer);

    function draw(p) {
        ctx.beginPath();
        ctx.moveTo(p[0].x,p[0].y)
        for(var i=1;i<p.length;i++)
        {
            ctx.lineTo(p[i].x,p[i].y)
        }
        
        ctx.closePath();
        ctx.stroke();
    }