<html>
<head>
<script type="text/javascript">
let SECONDS = 20;
let FRAMERATE = 50;
function repaint(canvas, context, pixels) {
  let width = canvas.width;
  let height = canvas.height;
  var offset = 0;
  let redColor = [255, 0, 0];
  let cyanColor = [0, 255, 255];
  let randomColor = [redColor, cyanColor][Math.floor(Math.random() * 2)];
  for (var y = 0; y < height; y++) {
    for (var x = 0; x < width; x++) {
      pixels.data[offset++] = randomColor[0]; // R
      pixels.data[offset++] = randomColor[1]; // G
      pixels.data[offset++] = randomColor[2]; // B
      pixels.data[offset++] = 0xFF; // A
    }
  }
  context.putImageData(pixels, 0, 0);
}
function quit(timerId) {
  clearInterval(timerId);
}
function init() {
  let canvas = document.getElementById('myCanvas');
  canvas.width = screen.width;
  canvas.height = screen.height;
  if (canvas) {
    let context = canvas.getContext('2d');
    if (context) {
      let pixels = context.createImageData(canvas.width, canvas.height);
      let myTimer = setInterval(repaint, 1000 / FRAMERATE, canvas, context, pixels);
      if (myTimer && SECONDS > 0) {
        setTimeout(quit, SECONDS * 1000, myTimer);
      }
    }
  }
}
</script>
</head>
<body style="margin: 0px" onload="init()">
<canvas id="myCanvas"></canvas>
</body>
</html>