Implementation Time

In the previous section, you learned at a high-level what goes into drawing and animating something on your canvas. You basically have two main steps:

1. Draw
2. Clear

In this section, we’ll create a simple circle slide animation and see how these draw and clear steps map to lines of sweet JavaScript code.

Adding Your Canvas

The first thing we are going to do is add the canvas element that will house our beautiful animation. You’ve seen this a bunch of times already, and you probably already have a page setup. If you don’t have a page already setup, create a blank HTML page and add the following HTML and CSS into it: