JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=800 height=800></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var triangle = [{
    x: 71,
    y: 247
}, {
    x: 299,
    y: 313
}, {
    x: 520,
    y: 215
}, {
    x: 587,
    y: 49
}, {
    x: 468,
    y: 154
}, {
    x: 420,
    y: 36
}];



// define the polygon
function define(polygon) {
    ctx.beginPath();
    ctx.moveTo(polygon[0].x, polygon[0].y);
    for (var i = 1; i < polygon.length; i++) {
        ctx.lineTo(polygon[i].x, polygon[i].y);
    }
    ctx.closePath();
}
define(triangle);
ctx.fill();