Easy Tutorial
❮ Dom Obj Date Prop Style Csstext ❯

HTML canvas scale() Method

Canvas Object

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:


Canvas Object

❮ Dom Obj Date Prop Style Csstext ❯