HTML reference manual

HTML tag大全

HTML canvas scale() method

scale() is a Canvas 2D API adds a scaling transformation method for canvas units based on the x horizontal direction and y vertical direction. Default in canvas, one unit is actually one pixel. For example, if we set 0.5as the scaling factor, the final unit will become 0.5pixels, and the shape size will become half of the original. In a similar way, we will2.0 as the scaling factor will increase the unit size to two pixels. The shape size will become twice as large.

HTML canvas reference manual

Online example

Draw a rectangle, zoom to 200%, then redraw the rectangle again:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas scale() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
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);
</script>　
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support 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 the drawing, all subsequent drawings will also be scaled. The positioning will also be scaled. If you scale(2,2), then the drawing will be positioned twice as far from the top left corner of the canvas.

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

Parameter value

Parameter	Description
scalewidth	Zoom the current drawing width (1=100%,0.5=50%,2=200%, and so on).
scaleheight	Zoom the current drawing height (1=100%,0.5=50%,2=200%, and so on).

Online example

Draw a rectangle; zoom to 200%, redraw the rectangle; zoom to 200%, redraw the rectangle; zoom to 200%, redraw the rectangle:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas scale() method usage-Basic Tutorial(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="170" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
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);
</script>
</body>
</html>

Test and see ‹/›

HTML canvas reference manual

HTML: <template> tag