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.beginPath();
    ctx.rect(0, 256, 256, 75);
    ctx.fillStyle = "#c65127";
    ctx.fill();

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

    ctx.beginPath();
    ctx.rect(0, 186, 256, 35);
    ctx.fillStyle = "#222";
    ctx.fill();
}

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