Generate colorful, animated background

HTML

<canvas id="canvas"></canvas>

CSS

html, body {
  height: 100%;
  margin: 0;
}
canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

JavaScript

const bc = document.getElementById("canvas");
const scale = 1;
bc.width = window.innerWidth / scale;
bc.height = window.innerHeight / scale;
const bctx = bc.getContext("2d", { alpha: true });
var bdata = bctx.createImageData(bc.width, bc.height);
data = bdata.data;
for (let i = 0; i < data.length; i += 4) {
  const value = Math.random() < 0.5 ? 0 : 255;
  // const value = Math.random() * 255;
  data[i] = value;
  data[i + 1] = value;
  data[i + 2] = value;
  data[i + 3] = 255;
}
bctx.putImageData(bdata, 0, 0);

const tc = new OffscreenCanvas(bc.width, bc.height);
const tctx = tc.getContext("2d");
tctx.font = `${bc.width / 3}px Verdana`;
tctx.textAlign = "center";
tctx.textBaseline = "middle";
tctx.fillText("Bruh", bc.width / 2, bc.height / 2);
const tdata = tctx.getImageData(0, 0, tc.width, tc.height).data;

(function loop() {
  for (let i = 0; i < data.length; i += 4) {
    if (tdata[i + 3] > 0) {
      const value = Math.random() < 0.5 ? 0 : 255;
      // const value = Math.random() * 255;
      data[i] = value;
      data[i + 1] = value;
      data[i + 2] = value;
      data[i + 3] = 255;
    }
  }
  bctx.putImageData(bdata, 0, 0);
  requestAnimationFrame(loop);
})();