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