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):
<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:
<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:
<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:
<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:
<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:
<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:
<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:
<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:
<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 »
