JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<br />
<input id="butt" type="button" value="Click me to fill()" />

JavaScript

var canvas;
var ctx;

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    draw();
}


function draw(firstRectFillStyle) {
    // We clear the canvas every time
    ctx.clearRect(0,0,canvas.width, canvas.height);
    
    // If no argument is supplied to draw() we use a default orange
    // Otherwise we set the fill style to the argument for the first rect
    if (firstRectFillStyle === undefined) {
        ctx.fillStyle = '#FA6900';
    } else {
        ctx.fillStyle = firstRectFillStyle;
    }
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 4;
    ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
    ctx.rect(0, 0, 15, 150);
    ctx.fill();

    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 4;
    ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30, 0, 30, 150);
}

function fill() {
    var image = new Image();
    image.src = "http://www.html5canvastutorials.com/demos/assets/wood-pattern.png";
    image.onload = drawPattern;

    function drawPattern() {
        var pattern = ctx.createPattern(image, "repeat");
        draw(pattern);
    }
}

var button = document.getElementById('butt');
button.onclick = fill;

init();