canvas-animation-no-clear.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Composited canvases with internal animation</title>
</head>
<body>
<script>
var size = 2048;
var numCanvases = 2;
var canvas = new Array();
var squareSize = size / numCanvases;
for (i = 0; i < numCanvases; i++) {
  var c = document.createElement("canvas");
  c.width = c.height = size;
  c.style.left = c.style.top = "0px";
  c.style.position = "absolute";
  document.body.appendChild(c);
  canvas[i] = c;
}

function redraw() {
  var i;
  for (i = 0; i < numCanvases; i++) {
    var c = canvas[i];
      var ctx = c.getContext("2d");
      ctx.fillStyle = "rgba(1, 1, 1, 0.01)";
      ctx.fillRect(0, 0, size, size);
      ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
      ctx.fillRect(Math.random() * c.width, Math.random() * c.height, squareSize, squareSize);
  }
  window.setTimeout(redraw, 1);
}
window.setTimeout(redraw, 1);
</script>
<canvas height="2048" width="2048" style="top: 0px; left: 0px; position: absolute;"></canvas><canvas height="2048" width="2048" style="top: 0px; left: 0px; position: absolute;"></canvas>
</body>
</html>

chromium/tools/perf/page_sets/tough_canvas_cases/canvas-animation-no-clear.html