# HTML Canvas Transformations

## HTML Canvas Transformations

With transformations we can translate the origin to a different position, rotate and scale it.

The six methods for transformations are:

• `translate()` - moves elements on the canvas to a new point in the grid
• `rotate()` - rotates elements on the canvas clockwise or counter-clockwise
• `scale()` - scales elements on the canvas up or down
• `transform()` - multiplies the current transformation with the arguments described
• `resetTransform()` - resets the the current transformation to the identity matrix
• `setTransform()` - resets the the current transformation to the identity matrix, and then runs a transformation described by the arguments

## The translate() Method

The `translate()` method is used to move an object/element by `x` and `y`.

The `translate()` method has the following parameters:

Parameter Description
x Distance to move in horizontal direction (left and right)
y Distance to move in vertical direction (up and down)

Assume one object is placed in position (10,10). Then, we use translate(70,70). The next object is also placed in position (10,10), but this means that the second object will be placed at x-position 80 (70 + 10) and at y-position 80 (70 + 10).

Let's look at some examples:

### Example

First, draw one rectangle in position (10,10), then set translate() to (70,70) (This will be the new start point). Then draw another rectangle in position (10,10). Notice that the second rectangle now starts in position (80,80):

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);

ctx.translate(70, 70);

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);
</script>
Try it Yourself »

### Example

First, draw one rectangle in position (10,10), then set translate() to (70,70) (This will be the new start point). Then draw another rectangle in position (10,10). Notice that the second rectangle now starts in position (80,80) (70+10, 70+10). Then set translate() to (80,-65) (This will be the new start point). Then draw a third rectangle in position (10,10). Notice that the third rectangle now starts in position (160,15) (80+80, 80-65). Notice that each time you call translate(), it builds on the previous start point:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);

ctx.translate(70, 70);

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 50);

ctx.translate(80, -65);

ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 100, 50);
</script>
Try it Yourself »

## The rotate() Method

The `rotate()` method rotates a shape by an angle.

The `rotate()` method has the following parameter:

Parameter Description
angle The rotation angle (clockwise)

Tip: Angles are in radians, not degrees. Use `(Math.PI/180)*degree` to convert.

### Example

Rotate the rectangle by 20 degrees:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rotate((Math.PI/180)*20);

ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);
</script>
Try it Yourself »

### Example

Here we add one more rectangle. Both the rectangles will be rotated by 20 degrees:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.rotate((Math.PI/180)*20);

ctx.fillStyle = "red";
ctx.fillRect(50, 10, 100, 50);

ctx.strokeStyle = "blue";
ctx.strokeRect(70, 30, 100, 50);
</script>
Try it Yourself »

## The scale() Method

The `scale()` method scales elements on the canvas up or down.

The `scale()` method has the following parameters:

Parameter Description
x Horizontal scaling factor (the width)
y Vertical scaling factor (the height)

One unit on the canvas is one pixel. If we set the scaling factor to 2, one unit becomes two pixels, and shapes will be drawn twice as large. If we set a scaling factor to 0.5, one unit becomes 0.5 pixels, and shapes will be drawn at half size.

### Example

Draw a rectangle. Scale to 200%, then draw a new rectangle:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.strokeRect(5, 5, 25, 25);

ctx.scale(2, 2);

ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
Try it Yourself »

### Example

Draw a rectangle. Scale to 50%, then draw a new rectangle:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.strokeRect(15, 15, 25, 25);

ctx.scale(0.5, 0.5);

ctx.strokeStyle = "blue";
ctx.strokeRect(15, 15, 25, 25);
</script>
Try it Yourself »

### Example

Draw a rectangle. Scale width to 200% and height to 300%, then draw a new rectangle:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.strokeRect(5, 5, 25, 25);

ctx.scale(2, 3);

ctx.strokeStyle = "blue";
ctx.strokeRect(5, 5, 25, 25);
</script>
Try it Yourself »

## The transform() Method

The `transform()` method 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.

The `transform()` method replaces the transformation matrix, and multiplies it with a matrix described by:

a c e
b d f
0 0 1

The `transform()` method has the following parameters:

Parameter Description
a Horizontal scaling
b Horizontal skewing
c Vertically skewing
d Vertically scaling
e Horizontal moving
f Vertically moving

### Example

Draw a yellow rectangle, run new transformation matrix with `transform()`. Draw a red rectangle, run new transformation matrix, then draw a blue rectangle. Notice that each time you call `transform()`, it builds on the previous transformation matrix:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);

ctx.transform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
Try it Yourself »

## The resetTransform() Method

The `resetTransform()` method resets the current transformation to the identity matrix.

This is equal to calling: `ctx.setTransform(1,0,0,1,0,0)`.

## The setTransform() Method

The `setTransform()` method resets the current transformation to the identity matrix, and then runs a transformation described by the arguments. This lets you scale, rotate, translate (move), and skew the context.

The `setTransform()` method has the following parameters:

Parameter Description
a Horizontal scaling
b Horizontal skewing
c Vertically skewing
d Vertically scaling
e Horizontal moving
f Vertically moving

### Example

Draw a yellow rectangle, reset and run new transformation matrix with ``` setTransform()```. Draw a red rectangle, reset and run a new transformation matrix, then draw a blue rectangle. Notice that in this example, the red rectangle is not shown because it is under the blue rectangle:

Your browser does not support the HTML5 canvas tag.
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, 200, 100)

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "red";
ctx.fillRect(10, 10, 200, 100);

ctx.setTransform(1, 0.5, -0.5, 1, 30, 10);

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 200, 100);
</script>
Try it Yourself »

W3Schools' Full Canvas Reference

×

## Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com