Home | History | Annotate | Download | only in graphics_HwOverlays
      1 <html>
      2 <head>
      3   <title>Canvas 2D</title>
      4 </head>
      5 <body>
      6   <canvas id='canvas1' style="border: 1px solid black;"></canvas>
      7 </body>
      8 <script type="text/javascript">
      9   var canvas = document.getElementById('canvas1');
     10   // Make the canvas very large but still falling inside the viewport; |height|
     11   // also has to account for the Shelf (taskbar) at the bottom.
     12   const dpr = window.devicePixelRatio || 1;
     13   const width = (window.innerWidth / dpr) * 0.9 / dpr;
     14   const height = (window.innerHeight / dpr) * 0.9 / dpr;
     15   canvas.width = width;
     16   canvas.height = height;
     17 
     18   var ctx = canvas.getContext('2d');
     19   var draw_passes_count = 0;
     20 
     21   function draw_pass() {
     22     ctx.beginPath();
     23     ctx.lineWidth = '5';
     24     // Consider a seeded random number generator if there are reproducibility
     25     // problems.
     26     ctx.strokeStyle = 'rgb(' + 0 + ',' + Math.random() * 255 + ',0)';
     27     ctx.moveTo(Math.random() * width, Math.random() * height);
     28     ctx.lineTo(Math.random() * width, Math.random() * height);
     29     ctx.stroke(); // Draw it
     30     draw_passes_count++;
     31   }
     32   setInterval(draw_pass, 1000);
     33 
     34   function get_draw_passes_count() {
     35     return draw_passes_count;
     36   }
     37 
     38 </script>
     39 </html>
     40