Canvas Element transformations

In the previous posts, we discussed using images and also applying styles and colors. In this post, we shall discuss using canvas transformations.
When we talk about transformations in Canvas element we have to deal with two main concepts they are

  • save()
  • restore()

The above-mentioned methods are used to save and retrieve the canvas states. The canvas states are stored onto a stack. Every time the save method is called, the current drawing state is pushed onto the stack. A drawing state consists of transformations, stroke style, fill style, linewidth shadow blur values. When the restoration method is called the last saved state is taken from the stack and is exhibited.

A save and restore canvas state example

Here is an example to illustrate the stacking process and property exhibition

The first step is to draw a large rectangle with the default settings. This state is saved and the color is filled. Then we have to draw the second blue rectangle and the state should be saved. Again the settings are changed and once again the third semi-rectangle should be saved.

No, we need to call the reestablish explanation one by one and as we call the reestablish articulation one by one we can see that the past spared states are recovered and their properties are tossed in the fill shading area. This may look troublesome and a long procedure for few lines of codes yet in the event that the lines of code develop substantial or the consequences will be severe if the code ends up complex to deal with this property will be extremely useful.