HTML5 Canvas transformation

HTML5 Canvas transformation methods, online instance demonstration of how to use HTML5 Canvas for rotation, movement, scaling, rotation around different points, scale setting, etc.

You can apply transformations to HTML5Any content drawn on the canvas. Here is a list of transformations you can apply:

• move (move the content drawn)

• rotation

• Scaling

This article introduces all these transformations

transformation matrix

You can2Set the transformation matrix in the 2D context. This matrix will be multiplied with all the content drawn on the canvas. For the examples used in this tutorial, I set it to the 'identity' matrix, which, when multiplied by the x, y coordinate set, results in x, y. In other words, no transformation is performed.
This is the method to set the transformation matrix to the identity matrix:

context.setTransform(1,　0,　0,　1,　0,　0);

Movement

You can apply movement to all content drawn on the canvas. Movement means relocating the drawn content. This is how you set movement in your code:

var　x　=　100;
var　y　=　　50;
context.translate(x,　y);

This example will move all shapes drawn on the canvas on the x-axis100, moving on the y-axis50.
Note: Translation only applies to shapes drawn after the translate() function call. Shapes drawn before the function call are not affected.
This is another example. Two rectangles are drawn at the same coordinates, but one rectangle is drawn before and one rectangle is drawn after the translate() function call.

<canvas id="ex1" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d);
context.fillStyle = "#ff0000";
context.fillRect(10,10,　100,　100);
context.translate(50,　25);
context.fillStyle = "#0000ff";
context.fillRect(10,10,　100,　100);
</script>

This is the result when drawing on the canvas:

rotation

You can apply automatic rotation to the drawing on HTML5Any shape drawn on the canvas. This is done through rotate()2The function on D context is completed. This is a simple example:

context.rotate(radians);

The rotation angle is passed as a parameter to the rotate() function. The value must be in radians, not degrees.
All shapes drawn after setting the rotation will rotate around the point 0,0 on the canvas. This is the upper left corner of the canvas.
Like translation, rotation only applies to all shapes drawn after the rotate() function call.
This is an example of drawing the same rectangle before and after setting the rotation:

<canvas id="ex2" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
　var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d);
　context.fillStyle = "#ff0000";
　context.fillRect(10,10,　100,　100);
　context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
　context.fillStyle = "#0000ff";
　context.fillRect(10,10,　100,　100);
</script>

This is the appearance when drawing a rectangle on the canvas:

Rotating around a different point

As mentioned before, all shapes are rotated around the upper left corner of the canvas (0,0). But what if you want to rotate the shape around a different point? For example, rotate the shape around its own center?
To rotate a shape around its own center, you must first translate the canvas to the center of the shape, then rotate the canvas, then translate the canvas back to 0,0, and then draw the shape.
This is a code example that makes a blue rectangle rotate around its center:

<canvas id="ex3" width="500" height="150" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d);
var x =　10;
var y =　10;
var width =　100;
var height =　100
var　cx　　　　　=　x　+　0.5　*　width;
var　cy　　　　　=　y　+　0.5　*　height;
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.translate(cx,　cy);
context.rotate(　(Math.PI　/　180)　*　25);　　//rotate　25　degrees.
context.translate(-cx,　-cy);　//set center back to 0,0
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

This is the appearance when drawing on the canvas:

This example first translates the canvas center to the center of the square (cx, cy). Then the canvas is rotated25The canvas is then transformed back to 0,0. Now, the canvas is rotated around cx, cy.25degrees. All the content you draw will be rotated around cx, cy. Finally, the rectangle is drawn as if nothing has happened, but now it will rotate around cx, cy.25degrees. This can be achieved with a single transformation call. The coordinates of the rectangle do not change. Note that the two calls to context.fillRect() to draw the red and blue rectangles are the same. It is the transformation calls between them that make them appear in different positions and rotated positions

Scaling

Scaling can be applied to shapes in HTML5All shapes drawn on the canvas are automatically scaled.
When scaling, all coordinates on the x-axis and y-axis can be scaled by certain factors. You can use the scale() function to set these factors as shown below:

var scaleX =　2;
var scaleY =　2;
context.scale(scaleX, scaleY);

This example scales all coordinates on both the x-axis and y-axis2times.
Like translate() and rotate(), the scaling factor only applies to shapes drawn after the scale() call.
This is another code example for drawing red and blue rectangles on the canvas, where the scaling factor applies to the blue rectangle:

<canvas id="ex5" width="500" height="250" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d);
var x =　10;
var y =　10;
var width =　100;
var height =　100
context.fillStyle = "#ff0000";
context.fillRect(x, y, width, height);
context.scale(2,2);
context.fillStyle = "#0000ff";
context.fillRect(x, y, width, height);
</script>

These are the graphics generated on the canvas:

Please note that the size of the blue rectangle is twice that of the red rectangle.
Attention must also be paid to the distance from the upper left corner of the blue rectangle to the upper left corner of the canvas (0,0), which is also doubled. All coordinates are scaled by a factor of two, and the upper left corner coordinates of the rectangle are the same. To avoid moving the shape during scaling, it is necessary to combine scaling with translation.

Zoom Level

You can use the zoom function to achieve proportional scaling. The following canvas contains4a rectangle. Below the canvas is an input field that can be used to change the scale level (scale ratio).

Zoom Level:

If you see a text field with a scale level value, please enter a value between1to10Check the scale level, then exit the text field to see the result. If you see a slider, just move the slider.

Combination of Translation, Rotation, and Scaling

Of course, you can combine all three transformations on the same canvas. But just like combining rotation and translation, it is important to pay attention to the order of operations.2The order of function calls is also very important when calling functions such as scale() before translate(). The result may look different. You may need to adjust the order of function calls to make it work correctly.