Creates a canvas in the body to draw a Matrix-style rain effect. Generated by ChatGPT. Free to reuse with no attribution required.

matrixrain.js

function matrixRain() {
  const canvas = document.createElement("canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  canvas.style.position = "fixed";
  canvas.style.top = 0;
  canvas.style.left = 0;
  canvas.style.zIndex = -1;
  document.body.appendChild(canvas);

  const context = canvas.getContext("2d");
  const fontSize = 14;
  const columns = canvas.width / fontSize;
  const drops = [];

  for (let i = 0; i < columns; i++) {
    drops[i] = 1;
  }

  function drawMatrixRain() {
    context.fillStyle = "rgba(0, 0, 0, 0.1)";
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "#00FF00";
    context.font = fontSize + "px Courier";

    for (let i = 0; i < drops.length; i++) {
      const text = String.fromCharCode(Math.random() * 128);
      const x = i * fontSize;
      const y = drops[i] * fontSize;

      context.fillText(text, x, y);

      if (y > canvas.height && Math.random() > 0.975) {
        drops[i] = 0;
      }

      drops[i]++;
    }
  }

  setInterval(drawMatrixRain, 50);
}

jsfiddle: https://jsfiddle.net/aesrxw2c/show

If you add the following event listener in the matrixRain function, it will update the canvas width and height when the window is resized, such as when you go into fullscreen mode by pressing F11. Now the matrix rain should fill the entire screen when you go into fullscreen mode:

  window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  });