JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="box"></div>

CSS

#box{
    width:200px;
    height:200px;
    margin:20px;
}

JavaScript

function generateNoise(elem, opacity) {  
   if ( !!!document.createElement('canvas').getContext ) {  
      return false;  
   }  
   var canvas = document.createElement("canvas"),  
   ctx = canvas.getContext('2d'),  
   x, y,  
   number,  
   opacityopacity = opacity || .2;  
   canvas.width = 200;  
   canvas.height = 200;  
   for ( x = 0; x < canvas.width; x++ ) {  
      for ( y = 0; y < canvas.height; y++ ) {  
         number = Math.floor( Math.random() * 60 );  
         ctx.fillStyle = "rgba(" + number + "," + number + "," + number + "," + opacity + ")";  
         ctx.fillRect(x, y, 1, 1);  
      }  
   }  
   elem.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";  
}  
generateNoise(document.getElementById('box'), .5);