Let’s say you’re building a data visualization using D3 and SVG. You may hit a ceiling when you try to display several thousand elements at the same time. Your browser may start to puff under the weight of all those DOM elements.
Well here comes HTML5 Canvas to the rescue! It’s much faster, so it can solve your browser’s puffing problems.
But you may quickly find yourself daunted. Because D3 and Canvas works a bit differently from D3 and SVG — especially when it comes to drawing and adding interactivity.
But fear not — it’s not that complicated. Any experience you’ve had with building visuals with D3 and SVG — or approaching D3 with a different renderer — will help you tremendously.
This tutorial built on the shoulders of giants who have already covered Canvas well. I learned these three tutorials by heart and I recommend you do, too:
Working with D3.js and Canvas: When and How from Irene Ros
Needles, Haystacks, and the Canvas API from Yannick Assogba
Learnings from a D3.js addict on starting with Canvas from Nadieh Bremer