JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

JavaScript

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 || 1;
sctx.beginPath();
sctx.moveTo(this.points[0].x +0.5, this.points[0].y +0.5);
for (var i = 1; i < this.points.length; i++) {
    sctx.lineTo(this.points[i].x +0.5, this.points[i].y +0.5);
}
sctx.closePath();
sctx.stroke();
sctx.restore();