HTML canvas scale() Method

Canvas Object : Draw a rectangle, scale to 200%, then draw rectangle again

Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
scale()	4.0	9.0	3.6	4.0	10.1

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); drawings will be positioned twice as far from the left and top of the canvas as you specify.

JavaScript syntax:	context.scale(scalewidth, scaleheight);

Parameter Values

Parameter	Description	Play it
scalewidth	Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)	Play it »
scaleheight	Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)	Play it »

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:

var c = document.getElementById("myCanvas");
var ctx = c.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);

❮ Canvas Object

Contact US

Email:

Content: