YouTipCanvas Transform
## HTML Canvas `transform()` Method
The `transform()` method of the Canvas 2D API multiplies the current transformation matrix with the matrix described by its arguments. This allows you to scale, rotate, translate (move), and skew (shear) the context's coordinate system.
Each object drawn on the canvas is subject to a transformation matrix. The `transform()` method applies a transformation on top of any existing transformations, meaning its effects are cumulative.
---
## Syntax
```javascript
context.transform(a, b, c, d, e, f);
```
### Parameter Values
The transformation matrix is represented mathematically as:
$$\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}$$
| Parameter | Type | Description |
| :--- | :--- | :--- |
| **`a`** | Number | **Horizontal scaling**. A value of `1` represents no scaling (100%). |
| **`b`** | Number | **Horizontal skewing (shearing)**. |
| **`c`** | Number | **Vertical skewing (shearing)**. |
| **`d`** | Number | **Vertical scaling**. A value of `1` represents no scaling (100%). |
| **`e`** | Number | **Horizontal translation (moving)**. Moves the coordinate system along the X-axis. |
| **`f`** | Number | **Vertical translation (moving)**. Moves the coordinate system along the Y-axis. |
---
## How It Works
The `transform()` method modifies the current transformation matrix by multiplying it with the following matrix:
$$\begin{bmatrix} x' \\ y' \\ 1 \end{bmatrix} = \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} \begin{bmatrix} x \\ y \\ 1 \end{bmatrix}$$
This results in the new coordinates $(x', y')$ being calculated as:
* $x' = a \cdot x + c \cdot y + e$
* $y' = b \cdot x + d \cdot y + f$
---
## Code Examples
### Example 1: Cumulative Transformations
This example demonstrates how calling `transform()` multiple times builds upon the previous transformation state. We will draw a base rectangle, apply a transformation and draw a second rectangle, and then apply the same transformation again to draw a third rectangle.
```html
```
---
## Key Considerations & Best Practices
### 1. Transformations are Cumulative
The `transform()` method behaves relative to any existing transformations (such as `scale()`, `rotate()`, `translate()`, or prior `transform()` calls).
* **Example:** If you scale the canvas by $2\times$ using `ctx.scale(2, 2)`, and then call `ctx.transform(2, 0, 0, 2, 0, 0)` (which also scales by $2\times$), your subsequent drawings will be scaled by a total of $4\times$.
### 2. Resetting Transformations
If you want to apply a transformation without compounding it with existing ones, use the **`setTransform()`** method. `setTransform()` resets the current transform to the identity matrix and then applies the new matrix in one step.
* To reset the canvas back to its default state (identity matrix):
```javascript
ctx.setTransform(1, 0, 0, 1, 0, 0);
```
### 3. Order of Operations
Transformations only affect shapes, paths, and text drawn **after** the transformation method is called. Anything drawn prior to calling `transform()` remains unaffected.
### 4. Saving and Restoring State
When performing complex transformations, it is highly recommended to wrap your transformation code between `ctx.save()` and `ctx.restore()`. This prevents your transformations from bleeding into other drawing operations.
```javascript
ctx.save(); // Save the clean, default state
ctx.transform(1, 0.2, 0, 1, 50, 50);
// Draw transformed shapes here...
ctx.restore(); // Restore back to the clean state
```
---
## Browser Compatibility
| Feature | Chrome | Edge/IE | Firefox | Opera | Safari |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **`transform()`** | Yes | IE 9+ | Yes | Yes | Yes |
*Note: Internet Explorer 8 and earlier versions do not support the `