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 future 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 borders 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: