HTML canvas scale() method
Definition and usage
scale() method to scale the current drawing, larger or smaller.
Note:If you scale the drawing, all subsequent drawings will also be scaled. The positioning will also be scaled. If you write scale(2,2)Then the drawing will be positioned twice as far from the top-left corner of the canvas.
Instance
Example 1
Draw a rectangle, zoom it to 200%, and then draw another rectangle again:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Tip:More examples are provided at the bottom of the page.
Syntax
context.scale(scalewidth,scaleheight);
Parameter value
| Parameter | Description |
|---|---|
| scalewidth | Zoom the current drawing's width (1=100%, 0.5=50%, 2=200%, and so on). |
| scaleheight | Zoom the current drawing's height (1=100%, 0.5=50%, 2=200%, and so on). |
More Examples
Example 2
Draw a rectangle; zoom in to 200%, draw the rectangle again; zoom in to 200% and draw the rectangle again; zoom in to 200% and draw the rectangle again:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Browser Support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
