HTML canvas transform() Method
Example
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 250, 100)
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 250, 100);
ctx.transform(1, 0.5, -0.5, 1, 30, 10);
ctx.fillStyle = "#4985ed";
ctx.fillRect(0, 0, 250, 100);
Meaning
The transform() method replaces the current transformation matrix for the drawing.
Standard Syntax
JavaScript syntax:
context.transform(a,b,c,d,e,f);
Advertisement
Parameter Values
| Parameter | Description |
|---|---|
| a | Horizontal scaling |
| b | Horizontal skewing |
| c | Vertical skewing |
| d | Vertical scaling |
| e | Horizontal moving |
| f | Vertical moving |