CanvasRenderingContext2D: setTransform() method
===============================================

 The
 **`CanvasRenderingContext2D.setTransform()`**
 method of the Canvas 2D API resets (overrides) the current transformation to the
 identity matrix, and then invokes a transformation described by the arguments of this
 method. This lets you scale, rotate, translate (move), and skew the context.


**Note:** See also the `transform()` method; instead of overriding the current transform matrix, it
 multiplies it with a given one.


Syntax
------


```js
setTransform(a, b, c, d, e, f)
setTransform(matrix)
```


The transformation matrix is described by: 


[

a

c

e

b

d

f

0

0

1

]

 \left[ \begin{array}{ccc} a & c & e \ b & d
 & f \ 0 & 0 & 1 \end{array} \right]



This transformation matrix gets multiplied on the left of a column vector representing each point being drawn on the canvas, to produce the final coordinate used on the canvas.

### Parameters

`setTransform()` has two types of parameter that it can accept. The older
 type consists of several parameters representing the individual components of the
 transformation matrix to set:

`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.

Alternatively, you can pass a single parameter which is an object containing the values above as properties. The parameter names are the property keys, and if two synonymous names are both present (e.g. `m11` and `a`), they must be the same number value, or a `TypeError` will be thrown. Using the object form allows omitting some parameters — `a` and `d` default to `1`, while the rest default to `0`.

If a point originally had coordinates 


(
x
,
y
)

(x, y)

, then after the transformation it will have coordinates 


(
a
x
+
c
y
+
e
,
b
x
+
d
y
+
f
)

(ax + cy + e, bx + dy + f)

. This means:

* `e` and `f` control the horizontal and vertical translation of the context.
* When `b` and `c` are `0`, `a` and `d` control the horizontal and vertical scaling of the context.
* When `a` and `d` are `1`, `b` and `c` 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.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);
```


#### Result

### Retrieving and passing a DOMMatrix object

 In the following example, we have two `<canvas>` elements. We apply a
 transform to the first one's context using the first type of `setTransform()`
 and draw a square on it, then retrieve the matrix from it using
 `CanvasRenderingContext2D.getTransform()`.

 We then apply the retrieved matrix directly to the second canvas context by passing the
 `DOMMatrix` object directly to `setTransform()` (i.e. the second
 type), and draw a circle on it.

#### HTML


```html
<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>
```


#### CSS


```css
canvas {
  border: 1px solid black;
}
```


#### JavaScript


```js
const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 \* Math.PI);
ctx2.fill();
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-settransform-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The interface defining this method: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.transform()`