JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

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

JavaScript

function brickTexture(ctx, param){
  ctx.rect(0,0,param.width,param.height);
  ctx.fill();
  randomTexture(ctx,param);
  for(var y = 0; y < param.height; y+=param.height/10){
    ctx.moveTo(0,y);
    ctx.lineTo(param.width,y);
    var xx = ((y/(param.height/10)%2) == 0)?0:param.width/10;
    for(var x = xx; x< param.width; x+=param.width/5){
      ctx.moveTo(x,y);
      ctx.lineTo(x,y+param.height/10);
    }
  }
    
  for(var i = 0; i< 50; i++){
      var x = Math.random()*param.width;
      var y = Math.random()*param.height;
      ctx.rect(x,y,2,2);
    }
  ctx.stroke();
}

function randomTexture(ctx, param){  
  var canvasData = ctx.getImageData(0, 0, param.width, param.height);
  var color;
  var h = 0;
  for(var x=0; x<param.width*param.height; x++)
    //for(var y=0; y<param.height; y++)
      {       
        //color.setHSL(param.hsl.h, Math.random(),param.hsl.l);
        //color.setHSL(0.45, 0.5, x/(param.width*param.height));
        color = hsvToRgb(param.hsv.h, param.hsv.s, Math.random()*25+229);
        h++; if(h>360) h = 0;
        canvasData.data[x*4 + 0] = color.r;
        canvasData.data[x*4 + 1] = color.g;
        canvasData.data[x*4 + 2] = color.b;
        canvasData.data[x*4 + 3] = 255;
      }
  ctx.putImageData(canvasData, 0, 0);
}

function hsvToRgb(h, s, v){
     var f = (parseInt(h) % 60) * 255 / 60;
     var p = (255 - (s)) * (v) / 255;
     var q = (255 - f * s / 255) * v / 255;
     var t = (255 - (255 - f) * s / 255) * v / 255;
     var r = 0, g = 0, b = 0;
    switch(parseInt(h / 60) % 6){
        case 0: r = v; g = t; b = p; break;
        case 1: r = q; g = v; b = p; break;
        case 2: r = p; g = v; b = t; break;
        case 3: r = p; g = q; b = v; break;
        case 4: r = t; g = p; b = v; break;
        case 5: r = v; g = p; b = q; break;
    }
    return {r:r, g:g, b:b};
}


var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.strokeStyle = "rgba(127,0,0,1)";
context.fillStyle   =...