HTML5 Canvas Transformations
The Canvas element can be transformed. There are some transformation methods. Let’s see one by one.
1. Translation
It is possible to apply translation to everything that is drawn on a canvas. Translation means relocation of what is drawn. The translate(x,y) method is used to move the Canvas. x indicates how far to move the grid horizontally, and y indicates how far to move the grid vertically.
Translation is only applied to shapes drawn after the translate() function is called. Shapes drawn before that function call are unaffected.
Output:
2. Rotation
You can apply automatic rotation to any shape drawn on an HTML5 canvas. This is done using the rotate() function on the 2D Context. The angle to rotate is passed as parameter to the rotate() function. The value must be in radians, not degrees.
All shapes drawn after a rotation is set will rotated around the point 0,0 on the canvas. This is the upper left corner of the canvas.Rotation is only applied to all shapes drawn after the rotate() function is called.
Output:
3. Scaling
When scaling you scale all cordinates on the x-axis and y-axis by some factors. The scale() method scales the current drawing. It takes two parameters:
- The number of times by which the image should be scaled in the X-direction.
- The number of times by which the image should be scaled in the Y-direction.
The scaling is only applied to shapes drawn after the scale() call.
Output:
4. Rotating Around a Different Point
To rotate around a point you need to do 3 steps.
- First translate the context to the center you wish to rotate around.
- Then do the actual rotation.
- Then translate the context back.
Eg: Rotate a shape around its own center
Output:
