CanvasRenderingContext2D: transform() method
The
CanvasRenderingContext2D.transform()
method of the Canvas 2D API multiplies the current transformation with the matrix
described by the arguments of this method. This lets you scale, rotate, translate
(move), and skew the context.
Note: See also the
setTransform()
method, which
resets the current transform to the identity matrix and then invokes
transform()
.
Syntax
js
transform(a, b, c, d, e, f)
The transformation matrix is described by:
Parameters
a
(m11
)-
The cell in the first row and first column of the matrix.
b
(m12
)-
The cell in the second row and first column of the matrix.
c
(m21
)-
The cell in the first row and second column of the matrix.
d
(m22
)-
The cell in the second row and second column of the matrix.
e
(m41
)-
The cell in the first row and third column of the matrix.
f
(m42
)-
The cell in the second row and third column of the matrix.
If a point originally had coordinates , then after the transformation it will have coordinates . This means:
e
andf
control the horizontal and vertical translation of the context.- When
b
andc
are0
,a
andd
control the horizontal and vertical scaling of the context. - When
a
andd
are1
,b
andc
control the horizontal and vertical skewing of the context.
Return value
None (undefined
).
Examples
Skewing a shape
This example skews a rectangle both vertically (.2
) and horizontally
(.8
). Scaling and translation remain unchanged.
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.transform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
Result
Specifications
Specification |
---|
HTML Standard # dom-context-2d-transform-dev |
Browser compatibility
BCD tables only load in the browser
See also
- The interface defining this method:
CanvasRenderingContext2D
CanvasRenderingContext2D.setTransform()