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’ve 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, such as when the SVG approach implies adding a very high number of SVG elements to the DOM (more than 1,000), the performance of SVG can plummet, making HTML Canvas a better choice.

In this chapter, we’ll compare SVG with Canvas and discuss when we should use one over the other. Then we’ll render basic shapes in a canvas element, revisiting the Gallery of SVG Shapes exercise from chapter 1. We’ll 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

Summary