JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



// set up a pattern, something really elaborate!
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');

pctx.fillStyle = "rgb(188, 222, 178)";
pctx.fillRect(0,0,20,20);
pctx.fillRect(20,20,20,20);


// Now we draw that pattern to a custom shape:

var pattern = ctx.createPattern(pattern, "repeat");
ctx.beginPath();
ctx.moveTo(30, 30);
ctx.lineTo(300, 30);
ctx.lineTo(400, 60);
ctx.lineTo(300, 150);
ctx.lineTo(200, 50);
ctx.lineTo(100, 450);
//ctx.closePath();
ctx.fillStyle = pattern;
ctx.fill();