JSFiddle - React, Tailwind, and code Playground

by nchaves

HTML

<canvas id="c" width="400" height="400"></canvas>

JavaScript

var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.clearRect(0, 0, 400, 400);

var idata = ctx.createImageData(1, 1);
var d = idata.data;
d[0] = d[1] = d[2] = 0;
// d[3] = 0xff; // alpha

for (var x = 0; x < 400; x++) {
  for (var y = 0; y < 400; y++) {
    // if (Math.random() >= 0.5) {
    //  d[0] = d[1] = d[2] = 0;
    // } else {
    //  d[0] = d[1] = d[2] = 0xff;
    //}
    d[0] = Math.round(Math.random() * 0xff);
    d[1] = Math.round(Math.random() * 0xff);
    d[2] = Math.round(Math.random() * 0xff);
    d[3] = Math.round(Math.random() * 0xff);
    ctx.putImageData(idata, x, y);
  }
}