JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="sample"></div>

CSS

body, html {
  height:100%;
}
#sample {
  width:50px;
  height:50px;
  background-image: XYZ;
}

JavaScript

var Noise = Noise || (function () {

  var elements = [],
    generateNoise = function (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 = 45;
      canvas.height = 45;
      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);
        }
      }
      document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
    },
    getStyle = function (el) {
      var computed = window.getComputedStyle(el),
          //bgNoise = typeof computed != 'null' && computed.backroundImage.match('noise'),
        toReturn = {};
      console.log([computed.background, computed.backgroundImage, el.style.background, el.style.backgroundImage]);
      
      /*console.log(bgNoise);
      if (bgNoise) {
        return bgNoise;
      } else {
        return false;
      }*/
    },
    findElements = function () {
      if (elements.length > 0) {
        return elements;
      } else {
        var all = document.body.getElementsByTagName("*"),
          good = [],
          i;
        for (i in all) {
          if (all[i]) {
            var cur = all[i],
              hasNoise = getStyle(cur);
            if (hasNoise) {
              good.push([cur, hasNoise]);
            }
          }
        }
        elements = good;

        return good;
      }
    };

  findElements();
  console.log(elements);

}).call(this);