const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d", {
  desynchronized: true
});

const width = window.innerWidth;
const height = window.innerHeight;

ctx.imageSmoothingEnabled = false;

console.log("Canvas Size", width, height);

ctx.canvas.width = width;
ctx.canvas.height = height;

const imgData = ctx.getImageData(0, 0, 1, height);

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function redraw() {
  requestAnimationFrame(() => {
    draw();
    redraw();
  });
}

function draw() {
  for (let j = 0; j < imgData.data.length; j += 4) {
    imgData.data[j] = randomInt(0, 255); // red
    imgData.data[j + 1] = randomInt(0, 255); // green
    imgData.data[j + 2] = randomInt(0, 255); // blue
    imgData.data[j + 3] = 255; // alpha
  }

  ctx.putImageData(imgData, width - 1, 0);

  ctx.globalCompositeOperation = "copy";
  ctx.drawImage(ctx.canvas, -1, 0);
  ctx.globalCompositeOperation = "source-over";
}

redraw();