HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Canvas Object : Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add a new transformation matrix, then draw the rectangle again. Notice that each time you call transform(), it builds on the previous transformation matrix
The numbers in the table specify the first browser version that fully supports the method.
Method | |||||
---|---|---|---|---|---|
transform() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 matrix described by:
a | c | e |
b | d | f |
0 | 0 | 1 |
In other words, the transform() method lets you scale, rotate, move, and skew the current context.
JavaScript syntax: | context.transform(a, b, c, d, e, f); |
---|
Parameter | Description | Play it |
---|---|---|
a | Scales the drawing horizontally | Play it » |
b | Skew the the drawing horizontally | Play it » |
c | Skew the the drawing vertically | Play it » |
d | Scales the drawing vertically | Play it » |
e | Moves the the drawing horizontally | Play it » |
f | Moves the the drawing vertically | Play it » |
❮ Canvas Object