JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#canvas {
    background: #f00;
    width: 300px;
    height: 300px;
}

JavaScript

this.width = 1;
this.points = [{
    x: 100,
    y: 100
}, {
    x: 200,
    y: 100
}, {
    x: 200,
    y: 200
}, {
    x: 100,
    y: 200
}];

canvas.width = 300;
canvas.height = 300;
var sctx = canvas.getContext('2d');
sctx.save();
sctx.strokeStyle = this.color;
sctx.lineWidth = this.width;
sctx.beginPath();
sctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 1; i <= this.points.length; i++)
{
    var p1 = this.points[i-1],
        p2 = this.points[i] || this.points[0],
        x = p1.x,
        y = p1.y,
        w = (x - p2.x == 0) ? 1 : p2.x - x,
        h = (y - p2.y == 0) ? 1 : p2.y - y;
    console.log(i, p2);
    if (w < 0) {
        x += w;
        w = -w;
    }
    if (h < 0) {
        y += h;
        h = -h;
    }
    sctx.fillRect(x, y, w, h);
}
sctx.closePath();
sctx.stroke();
sctx.restore();