1<html> 2<head> 3 <title>Canvas 2D Low Latency</title> 4</head> 5<body> 6 <div style="position:relative; padding: 25px"> 7 <canvas id='canvas1' style="position:absolute;"></canvas> 8 </div> 9</body> 10<script type="text/javascript"> 11 let canvas = document.getElementById('canvas1'); 12 let ctx = canvas.getContext('2d', { desynchronized: true, alpha: false}); 13 14 // Some devices, e.g. krane, have a non-zero rotation in landscape mode. We 15 // precompensate this via the rotateZ CSS transform. See crbug.com/1046109. 16 const angle = screen.orientation.angle % 360; 17 canvas.style.transform = `rotateZ(${angle}deg)`; 18 19 // Make the canvas large but still falling inside the viewport; |height| 20 // also has to account for the Shelf (taskbar) at the bottom. 21 const integerWidth = Math.min(500, Math.floor(window.innerWidth * 0.9)); 22 const integerHeight = Math.min(300, Math.floor(window.innerHeight * 0.9)); 23 24 // We need subpixel accuracy for non-integer aspect ratios crbug.com/1042110. 25 const dpr = window.devicePixelRatio || 1; 26 canvas.style.border = `${1 / dpr}px solid black`; 27 if (angle % 180 == 90) { 28 canvas.width = integerHeight; 29 canvas.height = integerWidth; 30 canvas.style.width = `${integerHeight / dpr}px`; 31 canvas.style.height = `${integerWidth / dpr}px`; 32 33 // On krane, the canvas needs to be shifted "rightwards" when the screen is 34 // rotated 90 or 270 degrees, to bring it in view, see crbug.com/1046445/ 35 const offset = ((integerWidth / dpr) - (integerHeight / dpr)) / 2; 36 canvas.style.left = `${offset}px`; 37 } else { 38 canvas.width = integerWidth; 39 canvas.height = integerHeight; 40 canvas.style.width = `${integerWidth / dpr}px`; 41 canvas.style.height = `${integerHeight / dpr}px`; 42 } 43 44 let draw_passes_count = 0; 45 function draw_pass() { 46 ctx.beginPath(); 47 ctx.lineWidth = '5'; 48 // Consider a seeded random number generator if there are reproducibility 49 // problems. 50 ctx.strokeStyle = 'rgb(' + 0 + ',' + Math.random() * 255 + ',0)'; 51 ctx.moveTo(Math.random() * integerWidth, Math.random() * integerHeight); 52 ctx.lineTo(Math.random() * integerWidth, Math.random() * integerHeight); 53 ctx.stroke(); // Draw it 54 draw_passes_count++; 55 } 56 setInterval(draw_pass, 1000); 57 58 function get_draw_passes_count() { 59 return draw_passes_count; 60 } 61 62</script> 63</html> 64