HTML canvas scale() Method
Example
Draw a rectangle, scale to 200%, then draw 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);
Try it Yourself »
Browser Support
The numbers in the table specify the first browser version that fully supports the method.
| Method | |||||
|---|---|---|---|---|---|
| scale() | Yes | 9.0 | Yes | Yes | Yes |
Definition and Usage
The scale() method scales the current drawing, bigger or smaller.
Note: If you scale a drawing, all future drawings will also be scaled. The positioning will also be scaled. If you scale(2,2); drawings will be positioned twice as far from the left and top of the canvas as you specify.
| JavaScript syntax: | context.scale(scalewidth,scaleheight); |
|---|
Parameter Values
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | Play it » |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | Play it » |
More Examples
Example
Draw a rectangle, scale to 200%, draw rectangle again, scale to 200%, draw rectangle again, scale to 200%, draw 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);
Try it Yourself »
❮ HTML Canvas Reference
