Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <body> <h1>HTML5 Canvas scale()</h1> <p>The canvas below contains a red rectangle. Below the canvas is an input field that allows you to change the zoom level from 1 to 10. </p> <canvas id="myCanvas" width="500" height="500" style="border: 1px solid grey;"> Sorry, your browser does not support canvas. </canvas> <p>Zoom Level: <input type="range" id="zoom" min="1" max="10" value="1" onchange="changeScale()"></p> <script> function draw() { const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500); ctx.save(); const zoom = document.getElementById("zoom").value; ctx.scale(zoom, zoom); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); ctx.restore(); } draw(); function changeScale() { draw(); } </script> </body> </html>
