chapter fifteen

15 Rendering visualizations with Canvas

 

This chapter covers

  • Examining the pros and cons of using Canvas over SVG.
  • Rendering basic shapes with Canvas.
  • Applying mixed-mode rendering to a custom data visualization.
  • Exploring a strategy to handle Canvas interactions.

Throughout this book, we have rendered our data visualizations with SVG elements. Because they provide such a crisp rendering on all screen sizes and resolutions and are easily made responsive, accessible, performant, and interactive, SVG elements are the default support for digital data visualizations. But in specific circumstances, like when the SVG approach implies adding a very high amount of SVG elements to the DOM (over one thousand), the performance of SVG can plummet, making HTML Canvas a better choice.

In this chapter, we will compare SVG with Canvas and discuss when we should use one over the other. Then we will render basic shapes in a Canvas element, revisiting the gallery of SVG shapes exercise from chapter 1. We will also use a mixed-mode rendering technique to improve the performance of our van Gogh project (from chapter 14) by rendering the painting circles with Canvas instead of SVG. Finally, we’ll explore a strategy for handling interactions with a data visualization rendered with Canvas.

15.1 What is Canvas and when to use it

15.2 Rendering basic shapes with Canvas

15.2.1 The <canvas> element

15.2.2 Line

15.2.3 Rectangle

15.2.4 Circle

15.2.5 Path

15.2.6 Text

15.3 Mixed-mode rendering

15.4 A strategy for Canvas interactions

15.5 Summary

15.6 D3.js in the real world