HTML canvas scale() Method
Example
Draw a rectangle, scale it up to 200%, and then draw the rectangle again:
JavaScript:
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the scale() method.
Note: Internet Explorer 8 and earlier versions do not support the <canvas> element.
Definition and Usage
The scale() method scales the current drawing bigger or smaller.
Note: If you scale a drawing, all subsequent drawings will also be scaled. The positioning will also be scaled. If you scale(2,2), the drawing will be positioned twice as far from the top and left corners of the canvas.
| JavaScript Syntax: | context.scale(scalewidth, scaleheight); |
| --- | --- |
Parameter Values
| Parameter | Description |
|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, and so on). |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, and so on). |
More Examples
Example
Draw a rectangle; scale it up to 200%, draw the rectangle again; scale it up to 200%, draw the rectangle again; scale it up to 200%, draw the rectangle again:
JavaScript: