Animating the Canvas

One of Canvas's key advantages is animation. While the browser must work hard to re-calculate and re-render many elements retained in a DOM, it is relatively unstressed re-drawing a bitmapped image. In the following section, you will learn how to animate with Canvas. Let's first look at how you do it in a pure, vanilla Canvas way. After that, let's see if we can use D3's transition and life cycle Enter-Update-Exit pattern to help us animate. Both ways will be immensely helpful when building visualizations with D3 and Canvas as you will be able to choose the right technique for your own ideas or complement the two.

Animating the Canvas way

Let's go back to our house and test its roof with rain:

It's really raining.

Note

View this step in the browser: https://larsvers.github.io/learning-d3-mapping-8-3. Code example 08_03.html.

It's hard to see in a static image, but the blue dots are in fact moving down when viewed in the browser. They are also moving at different speeds, which...