JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas {
  border: solid 1px #000;
}

JavaScript

var canvas = document.getElementById('canvas');
if (canvas.getContext) { 
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(255,0,0)";
    ctx.fillRect (0, 0, 500, 300);
    ctx.beginPath();
    ctx.fillStyle   = "yellow";
    ctx.moveTo(250,80);
    ctx.lineTo(200,200);
    ctx.lineTo(320,125);
    ctx.lineTo(180,125);
    ctx.lineTo(300,200);
    ctx.lineTo(250,80);
    ctx.closePath();
    ctx.fill();
}