JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="200" height="200" />

JavaScript

var context = document.getElementById("c").getContext("2d");
var vertices = [{x: 20, y: 20}, {x: 120, y: 20}, {x: 20, y: 180}];

context.lineCap = "square";

context.beginPath();
context.moveTo(vertices[0].x, vertices[0].y);
for(var i=1; i<vertices.length; ++i) {
    context.lineTo(vertices[i].x, vertices[i].y);
}
context.lineTo(vertices[0].x, vertices[0].y); // go back to start to close path
context.stroke();

context.globalAlpha = 0.25;
context.strokeStyle = "#975";
context.lineWidth = 20;

var hw = context.lineWidth/2;

// minus half width
context.beginPath();
context.moveTo(vertices[0].x-hw, vertices[0].y-hw);
for(var i=1; i<vertices.length; ++i) {
    context.lineTo(vertices[i].x-hw, vertices[i].y-hw);
}
context.lineTo(vertices[0].x-hw, vertices[0].y-hw);
context.stroke();

// plus half width
context.beginPath();
context.moveTo(vertices[0].x+hw, vertices[0].y+hw);
for(var i=1; i<vertices.length; ++i) {
    context.lineTo(vertices[i].x+hw, vertices[i].y+hw);
}
context.lineTo(vertices[0].x+hw, vertices[0].y+hw);
context.stroke();