canvas-transform-ref.html (698B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id ="canvas" width="540" height="550"></canvas> 5 <script> 6 var canvas = document.getElementById('canvas'); 7 // In the test page, the paint worklet canvas has a size of width of 270 CSS 8 // pixels, and height of 275. To divided by 2 is to match the canvas size. 9 canvas.style.width = (canvas.width / 2) + 'px'; 10 canvas.style.height = (canvas.height / 2) + 'px'; 11 var ctx = canvas.getContext("2d"); 12 var fillW = 250; 13 var fillH = 50; 14 ctx.setTransform(2 * devicePixelRatio, 0, 0, 2 * devicePixelRatio, 0, 200); 15 ctx.beginPath(); 16 ctx.rect(0, 0, fillW, fillH); 17 ctx.closePath(); 18 ctx.clip(); 19 ctx.fillStyle = 'green'; 20 ctx.fillRect(0, 0, fillW, fillH); 21 </script> 22 </body> 23 </html>