Since we are using JavaScript to manipulate the canvas object, it is quite easy to implement some interactive animations. In this chapter, we'll take a look at how to do some basic animations.
Probably the biggest limitation is that once the image is drawn, it stays that way. If we need to move it, we have to redraw everything (including the previous one). Redrawing is quite time-consuming, and performance is very dependent on the speed of the computer.
#Basic steps of animation
You can draw a frame by the following steps:
- Empty the canvas Unless the next thing you want to draw will completely fill the canvas (such as a background image), you need to clear everything. The easiest way to do this is to use the clearRect method.
- Save the canvas state If you want to change some settings (style, deformation, etc.) that will change the canvas state, and you want to keep the original state every time you draw a frame, you need to save it first.
- The step of drawing animated shapes (animated shapes) is to redraw the animation frame.
- restore canvas state if saved c