JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas'></canvas>

CSS

html,body{background-color:#eaeaea;}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var mask = new Image();
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

mask.onload = function () {
    ctx.drawImage(mask, 0, 0);
    ctx.globalCompositeOperation = 'source-in';

    ctx.rect(0, 256, 256, 75);
    ctx.fillStyle = "#c65127";

    ctx.rect(0, 226, 256, 25);
    ctx.fillStyle = "#f5f4f0";

    ctx.rect(0, 186, 256, 35);
    ctx.fillStyle = "#c65127";

    ctx.fill();
}

mask.src = 'http://drewdahlman.com/experiments/masking/highball_mask.png';