HTML Reference Manual

Complete HTML Tag Reference

HTML canvas transform() method

transform() is a Canvas 2D API uses the method of multiple superimposing the current transformation with matrices, which are described by the parameters of the method. You can scale, rotate, move, and skew the context.

HTML canvas reference manual

Online Example

Draw a rectangle, use transform() to add a new transformation matrix, draw the rectangle again, add another transformation matrix, and draw the rectangle again. Note that each call to transform() is based on the previous transformation matrix:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas transform() method usage-Basic Tutorial(w3(codebox.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.fillStyle="green";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
</script>
</body>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9and Firefox, Opera, Chrome, and Safari support transform() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

Each object on the canvas has a current transformation matrix.

The transform() method replaces the current transformation matrix. It multiplies the current transformation matrix with the following described matrix:

a	c	e
b	d	f
0	0	1

In other words, transform() allows you to scale, rotate, move, and skew the current environment.

Note:This transformation only affects the drawing after the transform() method call.

Note:The behavior of the transform() method is relative to other transformations completed by rotate(), scale(), translate(), or transform(). For example: If you have already set the drawing to be doubled, the transform() method will double the drawing, and your drawing will finally be quadrupled.

Tip:Please see setTransform() A method that does not behave relative to other transformations.

JavaScript syntax:	context.transform(a,b,c,d,e,f);

Parameter value

Parameter	Description
a	Horizontal scaling of drawing.
b	Horizontal skewing of drawing.
c	Vertical skewing of drawing.
d	Vertical scaling of drawing.
e	Horizontal movement of drawing.
f	Vertical movement of drawing.

HTML canvas reference manual

HTML: <template> tag