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 in to 200%, and draw a 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 width (1=100%, 0.5=50%, 2=200%, etc.). |
| scaleheight | Zoom the current drawing height (1=100%, 0.5=50%, 2=200%, etc.). |
More examples
Example 2
Draw a rectangle; zoom in to 200%, draw a rectangle again; zoom in to 200% and draw a rectangle again; zoom in to 200% and draw a 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.
