Translating – A canvas feature

Translate is one of the canvas transformation methods. This method is used to shift the canvas and its origin point to various points in the matrix.


translate(x, y)

This method will take two arguments where the variable x denotes the movement of the element left or right and they variable denotes the movement of the element up or down. It is a good practice to save the canvas states they can be invoked when there is necessary to be called once again.


Translate Example


This below example shows a demo of the translating example. A function draw spirograph is used to draw spirograph patterns.

If the translate function is not used then only a quarter pattern will be seen. Translate function helps us to place them anywhere on the canvas and there is no need to move them manually in the spirograph function.

In this example, the function draw spirograph is called nine times by using two “for” loops. In both the cases, the translation is done in the canvas element and a spirograph is drawn, and finally, the canvas is returned back to the original state.