THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML canvas scale() Method

❮ HTML Canvas Reference

Example

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

YourbrowserdoesnotsupporttheHTML5canvastag.

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);
Try it Yourself »

Browser Support

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

Method
scale() Yes 9.0 Yes Yes Yes

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:

YourbrowserdoesnotsupporttheHTMLcanvastag.

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,1 5);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25,1 5);
Try it Yourself »

❮ HTML Canvas Reference