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
