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...