Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 »

×

Contact Sales

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

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.