Drawing with Canvas and D3

So far you have used D3 to render your visualizations with mostly SVG, and sometimes HTML, elements. In this section, you will learn how to use HTML5 Canvas to draw and animate your visualizations. Canvas can be used as an alternative to SVG, especially if you want to render more elements on screen. You will get an overview of what Canvas is and how it compares with SVG. You will learn how to draw and animate with Canvas and how you can use D3 with it.

After covering the foundations, we will visualize flight paths first with SVG and then with Canvas to contrast and compare the two rendering approaches hands on. First and foremost, this will give you a practical understanding of how Canvas works as an alternative to SVG. Secondly, it will showcase how Canvas can solve problems you might have when animating thousands of points at once with SVG, as browsers...

Introducing Canvas

Before you start to draw with Canvas, let's have a brief look at its concept – the mental model that will help you approach, plan, and write your applications. Canvas in its material form is a single HTML5 element. It is literally a blank canvas that you can draw on. For the actual drawing, you use the Canvas context – the Canvas API. The context can be thought of as your toolbox that can be manipulated with JavaScript.

You can compare the Canvas element with the root SVG element, as both contain all parts of the drawing. However, the key difference is that SVG (like HTML) operates in retained mode. The browser retains a list of all objects drawn onto the SVG (or HTML) canvas within the Document Object Model (DOM) – the scene-graph of your web application. This makes your drawing almost material. You produce a list of objects, change...

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

Summary

You've come a long way. You've learned how to draw with Canvas, how to animate the canvas in a pure Canvas way, as well as how to use D3 transitions and the Enter-Update-Exit pattern with Canvas. While the Vanilla Canvas way is perfectly reasonable for a great many applications, D3 offers seasoned functionality for data visualization you don't have to abandon. It requires a shift in thinking when building your application, but it can pay out specifically for drawing and animating a large number of points. It will expand your toolbox in a valuable way, especially at times where abundant data might require element-heavy representations.

In the next chapter, we will review a map visualization in SVG and then build one in Canvas. By doing so, you will not only be able to apply the learnings from this chapter, but you will also learn more about the differences...