Canvas transform(): Scale, Skew, Move and Combine Transforms
transform(a, b, c, d, e, f) multiplies a new 2D transformation matrix into the current Canvas transform. It can combine scaling, skewing and translation in one operation.
transform() parameters Top ↑
| Parameter | Main effect |
|---|---|
a | Horizontal scale |
b | Vertical skew |
c | Horizontal skew |
d | Vertical scale |
e | Horizontal translation |
f | Vertical translation |
ctx.transform(a, b, c, d, e, f);Interactive transform matrix Top ↑
transform() vs setTransform() Top ↑
transform() multiplies its matrix into the current transform, so effects accumulate. setTransform() first resets to the identity transform and then applies the supplied matrix.
ctx.translate(80, 20);
ctx.transform(1, 0, 0.5, 1, 0, 0); // combines with translation
ctx.setTransform(1, 0, 0, 1, 80, 20); // replaces current transformresetTransform() and save()/restore() Top ↑
ctx.save();
ctx.transform(1, 0.3, 0.4, 1, 80, 20);
ctx.fillRect(20, 20, 100, 50);
ctx.restore();
// Or reset all transforms explicitly
ctx.resetTransform();Common transform mistakes Top ↑
- Calling
transform()repeatedly without realizing matrices accumulate. - Clearing a transformed Canvas without resetting the transform first, which may clear a transformed region rather than the full bitmap.
- Confusing
transform()withsetTransform(). - Forgetting that rotation is easier to read using
rotate()and movement usingtranslate()when a full matrix is unnecessary.
Frequently asked questions Top ↑
What does transform() do? Top ↑
It multiplies a six-parameter 2D matrix into the current Canvas transformation matrix.
What is the difference between transform() and setTransform()? Top ↑
transform() combines with the current matrix; setTransform() replaces it after resetting to identity.
How do I remove all Canvas transforms? Top ↑
Use resetTransform(), or restore() a state saved before the transforms.
Can transform() skew shapes? Top ↑
Yes. The b and c matrix components can produce vertical and horizontal skew.
Should I use transform() for simple movement? Top ↑
translate(), rotate() and scale() are usually clearer for simple operations; transform() is useful when you need a combined matrix.
Related Canvas transformation tutorials Top ↑
translate() | rotate() | Sine animation example | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
