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
HTML Canvas Reference : Draw a rectangle, reset and create a new transformation matrix with setTransform(), draw the rectangle again, reset and create a new transformation matrix, then draw the rectangle again. Notice that each time you call setTransform(), it resets the previous transformation matrix and then builds the new matrix, so in the example below, the red rectangle is not shown, because it is under the blue rectangle
The numbers in the table specify the first browser version that fully supports the method.
Method | |||||
---|---|---|---|---|---|
setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Each object on the canvas has a current transformation matrix.
The setTransform() method resets the current transform to the identity matrix, and then runs transform() with the same arguments.
In other words, the setTransform() method lets you scale, rotate, move, and skew the current context.
JavaScript syntax: | context.setTransform(a,b,c,d,e,f); |
---|
Parameter | Description | Play it |
---|---|---|
a | Horizontal scaling | Play it » |
b | Horizontal skewing | Play it » |
c | Vertical skewing | Play it » |
d | Vertical scaling | Play it » |
e | Horizontal moving | Play it » |
f | Vertical moving | Play it » |
❮ HTML Canvas Reference