Static noise

Fills a canvas with something that looks like random noise.

by David Iglesias

HTML

<canvas id="here" width="320" height="200"></canvas>

JavaScript

draw(here);

function draw(canvasElement, fps = 15) {
  let lastFrame = 0;
  let frameDuration = 1000 / fps;
  let x = 20, y = 20, numSquares = x*y;
  let w = Math.round(canvasElement.width/x);
  let h = Math.round(canvasElement.height/y);
  let ctx = canvasElement.getContext("2d");

  let frame = t => {
    let elapsed = t - lastFrame;
    if (elapsed >= frameDuration) {
      // Paint
      for (let square=0; square<numSquares; square++) {
        let sqX = square % x;
        let sqY = Math.floor(square / x);
        let n = getRandomInt();
        ctx.fillStyle = `rgb(${n}, ${n}, ${n})`;
        ctx.fillRect(sqX*w, sqY*h, w, h);
      }
      // Prepare next frame
      lastFrame = t;
    }
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}
  
function getRandomInt(max = 255) {
  return Math.floor(Math.random() * max);
}