1 <html> 2 <head> 3 <title>Canvas 3D</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 var ctx = canvas.getContext('webgl'); 11 // Make the canvas very large but still falling inside the viewport; |height| 12 // also has to account for the Shelf (taskbar) at the bottom. 13 const dpr = window.devicePixelRatio || 1; 14 canvas.width = (window.innerWidth / dpr) * 0.9 / dpr; 15 canvas.height = (window.innerHeight / dpr) * 0.9 / dpr; 16 17 var draw_passes_count = 0; 18 19 function draw_pass() { 20 // Consider a seeded random number generator if there are reproducibility 21 // problems. 22 ctx.clearColor(0, Math.random(), 0, 1.0); 23 ctx.clear(ctx.COLOR_BUFFER_BIT); 24 draw_passes_count++; 25 } 26 setInterval(draw_pass, 1000); 27 28 function get_draw_passes_count() { 29 return draw_passes_count; 30 } 31 32 </script> 33 </html> 34
