Phase 11Intermediate12 of 19 in Data Visualization

Canvas 2D in Depth

Draw thousands of marks as pixels: the canvas and its context, paths, text, transforms, sharp high-DPI drawing, images, pixels, animation and accessibility.

SVG gives every mark its own page element, and that is wonderful until you have ten thousand of them. Canvas is the other way to draw: one element, one grid of pixels, and a set of drawing commands. Nothing is remembered, so there is nothing to slow down.

This phase teaches the canvas properly. You meet the context and the two sizes every canvas has, then paths, styles and text, then transforms and the state stack, which cause most canvas surprises. You make drawings sharp on high-resolution screens, work with images and single pixels, animate, and make a canvas readable for people who cannot see it.

At the end you add a canvas to the Lumen Bikes dashboard that draws all 10,000 June trips as dots, sharp on every screen, with a summary and a table beside it.

Phase 11 · the story

Arjun, engineer

“I want to draw every trip, all 10,000 of them, and the SVG page is starting to crawl.”

Priya asked a simple question on Thursday: "Where do our trips start?" Arjun tried the obvious thing. One SVG circle per trip, 10,000 circles, each one a page element the browser has to keep, style and lay out. The page took seconds to appear and the scroll stuttered.

He knows the other tool. A canvas is one element: you tell it to paint, it paints pixels, and it forgets. Ten thousand dots are ten thousand paint commands, not ten thousand things to look after. The catch is that everything he took for granted in SVG is now his job: sizes, sharpness on phones, what a screen reader hears, what happens when you click.

In this phase you learn the canvas properly, and then you give the dashboard its first canvas: every June trip as a dot, sharp on every screen, with a summary and a table for the people who cannot see the picture.

In this phase

You will learn

Set up a canvas with the right size, and draw paths, shapes and text on it
Use transforms and the state stack without leaking one drawing's settings into the next
Make a canvas sharp on high-resolution screens and animate it with a redraw loop
Draw 10,000 dots on a canvas and describe the picture in words and in a table

You write code in

In your Vite project lumen-dashboard/ (run npm run dev), and in the editor on this page

Files you touch

src/utils/canvas.js
src/charts/trips-canvas.js
src/main.js

0/7 · 0%

7 topics ~3 h 17 code blocks & diagrams

Start with the first topic

11.1

The Canvas and Its Context

A canvas is one page element holding a grid of pixels, and the context is the pen you paint on it with. It has two sizes, the grid and the box, and it forgets every shape the moment it is painted.

21 min 2 code practice

11.2

Paths, Styles and Text

Canvas draws shapes by building a path and then painting it with fill or stroke. Forgetting beginPath is the classic bug, and text needs measuring because a canvas never wraps or shrinks it for you.

24 min 3 code practice

11.3

Transforms and the State Stack

translate, rotate and scale move the canvas's grid instead of your shapes, and every one of them stays set until you undo it. save and restore are how you undo them, and forgetting that is the source of most canvas surprises.

20 min 3 code practice

11.4

Sharp Canvas on High-DPI Screens

On a phone or a retina laptop one CSS pixel is two or three device pixels, so a canvas sized in CSS pixels is stretched and blurry. The fix is a bigger pixel grid in the same box, with the context scaled once.

22 min 2 code practice

11.5

Images, Pixels and Compositing

A canvas can draw images, read and write its own pixels, mix new paint with old in many ways, and clip drawing to a shape. Reading pixels of an image from another site is blocked, and the error is the one to know.

22 min 3 code practice

11.6

Animation on Canvas

Animating a canvas is a loop that clears, updates by elapsed time and paints again before every screen refresh. A canvas is one image to a screen reader, so every canvas also needs words and a table.

26 min 3 code practice

11.7

Build: The Trips Canvas

Add a canvas to the dashboard that draws all 10,000 June trips as dots around their start stations, sharp on every screen, with a text summary and a table beside it. It answers Arjun's wish to see every trip.

26 min 1 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

The forgotten beginPath

Monday's line should be orange and Tuesday's teal, but both come out teal.

Beginner

Stop the transform leaking

Three markers should sit 60 pixels apart, at x = 20, 80 and 140. Only the first is right, because each translate adds to the last.

Intermediate

Make it sharp at ratio 2

The canvas is 160 × 60 CSS pixels. On a screen with pixel ratio 2 it should have a 320 × 120 grid, but still draw in CSS pixels.