| <html> |
| <head> |
| <title>Canvas 2D Low Latency</title> |
| </head> |
| <body> |
| <canvas id='canvas1' style="border: 1px solid black;"></canvas> |
| </body> |
| <script type="text/javascript"> |
| let canvas = document.getElementById('canvas1'); |
| // Make the canvas very large but still falling inside the viewport; |height| |
| // also has to account for the Shelf (taskbar) at the bottom. |
| const dpr = window.devicePixelRatio || 1; |
| const width = (window.innerWidth / dpr) * 0.9 / dpr; |
| const height = (window.innerHeight / dpr) * 0.9 / dpr; |
| canvas.width = width; |
| canvas.height = height; |
| |
| let ctx = canvas.getContext('2d', { |
| desynchronized: true, |
| alpha: false |
| }); |
| let draw_passes_count = 0; |
| |
| function draw_pass() { |
| ctx.beginPath(); |
| ctx.lineWidth = '5'; |
| // Consider a seeded random number generator if there are reproducibility |
| // problems. |
| ctx.strokeStyle = 'rgb(' + 0 + ',' + Math.random() * 255 + ',0)'; |
| ctx.moveTo(Math.random() * width, Math.random() * height); |
| ctx.lineTo(Math.random() * width, Math.random() * height); |
| ctx.stroke(); // Draw it |
| draw_passes_count++; |
| } |
| setInterval(draw_pass, 1000); |
| |
| function get_draw_passes_count() { |
| return draw_passes_count; |
| } |
| |
| </script> |
| </html> |
