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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   5   <title>Composited canvases with internal animation</title>
   6 </head>
   7 <body>
   8 <script>
   9 var size = 2048;
  10 var numCanvases = 2;
  11 var canvas = new Array();
  12 var squareSize = size / numCanvases;
  13 for (i = 0; i < numCanvases; i++) {
  14   var c = document.createElement("canvas");
  15   c.width = c.height = size;
  16   c.style.left = c.style.top = "0px";
  17   c.style.position = "absolute";
  18   document.body.appendChild(c);
  19   canvas[i] = c;
  20 }
  21
  22 function redraw() {
  23   var i;
  24   for (i = 0; i < numCanvases; i++) {
  25     var c = canvas[i];
  26       var ctx = c.getContext("2d");
  27       ctx.fillStyle = "rgba(1, 1, 1, 0.01)";
  28       ctx.fillRect(0, 0, size, size);
  29       ctx.fillStyle = "rgba(0, 255, 0, 0.5)";
  30       ctx.fillRect(Math.random() * c.width, Math.random() * c.height, squareSize, squareSize);
  31   }
  32   window.setTimeout(redraw, 1);
  33 }
  34 window.setTimeout(redraw, 1);
  35 </script>
  36 <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>
  37 </body>
  38 </html>