Home icon
Data Visualisation Guide

Canvas

2 minutes read

Online graphics

SVG is a handy and convenient format for data visualisation. But it also has limitations: when a visualisation contains thousands of elements, performance becomes an issue, and your browser will start to hang. This is especially true if the elements in the visualisation are animated, which requires a lot of computing power.

In situations like this, where SVG is not an option, you can consider using the HTML <canvas> element. You can look at <canvas> as a bitmap image for which you compute the colour for each pixel dynamically with JavaScript. A deeper look at <canvas> would lead us too far, but below are some examples of visualisations that use it for data visualisation.

A screenshot of an animation that shows the number of recovered, healthy and sick people in a simulation of the spread of an infectious disease

These simulations show how to flatten the coronavirus growth curve. Source: washingthonpost.com

A map that shows where all runners in the marathon of Berlin were after 2 hours, 4 minutes and 29 seconds of running

Source: Berlin-Marathon 2016 - So schnell läuft Ihre Stadt

A screenshot of a map with green and brown dots scattered over the countries of the globe, with each dot representing 100.000 people

Source: SDG Atlas 2020

Related pages

RAWGraphs

Datawrapper

Flourish

SVG elements: text

SVG elements: geometric shapes

More advantages of SVG

Online graphics