canvas-reset-ref.html (583B)
1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id ="canvas"></canvas> 5 <script> 6 var canvas = document.getElementById('canvas'); 7 var ctx = canvas.getContext("2d"); 8 9 // Adjust the canvas to get highdpi rendering. 10 canvas.style.width = '270px'; 11 canvas.style.height = '275px'; 12 canvas.width = 270 * devicePixelRatio; 13 canvas.height = 275 * devicePixelRatio; 14 ctx.scale(devicePixelRatio, devicePixelRatio); 15 16 var fillW = 250; 17 var fillH = 50; 18 ctx.beginPath(); 19 ctx.rect(0, 0, fillW, fillH); 20 ctx.closePath(); 21 ctx.clip(); 22 ctx.fillStyle = 'green'; 23 ctx.fillRect(0, 0, fillW, fillH); 24 </script> 25 </body> 26 </html>