JSFiddle - React, Tailwind, and code Playground

by smombartz

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 = 64;
pattern.height = 64;
var pctx = pattern.getContext('2d');

pctx.fillStyle = 'rgb(0,0,0)';
//I want the following rectangle to be repeated:
pctx.fillRect(0,0,64,64);
for(var w=0; w<=64; w++){
        for(var h=0; h<=64; h++){
                rand = Math.floor(Math.random()*50);
                while(rand<20){
                        rand = Math.floor(Math.random()*50);
                }
                opacity = Math.random();
                while(opacity<0.5){
                        opacity = Math.random();
                }
                pctx.fillStyle= 'rgba('+rand+','+rand+','+rand+','+opacity+')';
                pctx.fillRect(w,h,1,1);
        }
}


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

var pattern = ctx.createPattern(pattern, "repeat");
ctx.beginPath();
ctx.fillStyle = pattern;

// Draw whatever you want that is to be filled with the pattern. I'm just gonna fill the entire canvas with the pattern:
ctx.fillRect(0,0,500,500);