Canvas scale() Method
Example
Draw a rectangle, scale to 200%, then draw rectangle again:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
Try it Yourself »
More examples below.
Description
The scale() method scales the current context.
Note
If you scale a context, all future drawings will be scaled. If you scale(2,2), drawings will be positioned twice as far from the 0,0 position of the canvas as you specify.
See Also:
The rotate() Method (Rotate the context)
The translate() Method (Remap the 0,0 position)
The transform() Method (Scale, rotate, move, skew context)
The setTransform() Method (Scale, rotate, move, skew context).
Syntax
| context.scale(scalewidth, scaleheight) |
Parameter Values
| Param | Description | Play it |
|---|---|---|
| scalewidth | Scales the width (1=100%, 0.5=50%, 2=200%) | Play it » |
| scaleheight | Scales the height (1=100%, 0.5=50%, 2=200%) | Play it » |
Return Value
| NONE |
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:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.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 »
Browser Support
The <canvas> element is an HTML5 standard (2014).
scale() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
