HTML canvas scale()Method
Example
Draw a rectangle, scale it to 200%, and then draw the 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);
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
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 to a larger or smaller size.
Note:If you scale a drawing, all subsequent drawings will also be scaled. Positioning will also be scaled. If you scale(2,2), the drawing will be positioned twice as far from the upper-left corner 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 to 200%, draw the rectangle again; scale to 200%, draw the rectangle again; scale to 200%, draw the 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);
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);
Try it yourself »
HTML canvas Reference Manual Other Extensions