Easy Tutorial
❮ Att Track Label Att Body Alink ❯

HTML canvas scale() Method

HTML canvas Reference Manual

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:


❮ Att Track Label Att Body Alink ❯