JSFiddle - React, Tailwind, and code Playground

CSS

html, body, * {padding:0; margin:0}

JavaScript

var vpW = $(window).width();
    var vpH = $(window).height();
    var halfHeight = vpH/2;
    var canvas = document.createElement("canvas");
    canvas.width = vpW; canvas.height = vpH;
    var blade1 = canvas.getContext('2d');
    blade1.fillStyle = "#000";
    blade1.beginPath();
    blade1.moveTo(0,0); // top left
    blade1.lineTo(vpW, 0); // top right
    blade1.lineTo(vpW,halfHeight / 2.0); // right, quarterway down
    blade1.lineTo(0,halfHeight + halfHeight / 2.0); // left, threequarters down
    blade1.closePath();
    blade1.fill();

    $(canvas).css('backgroundColor','#fc0');
    $(canvas).prependTo('body');