A bar chart with a real text alternative
The numbers live in a real HTML table (hidden visually, still read by screen readers), and the canvas is drawn from it. One source of truth, two ways to perceive it.
<canvas> is a blank rectangle of pixels that JavaScript paints on; it's fast for games, charts and image effects, but what you draw is only pixels, so you must give it a text alternative.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Draw a 200 × 200 canvas with a red square of side 100 in the centre, and give it a text alternative.
Draw a smiley face (a yellow circle, two black eye circles) on a 150 × 150 canvas.
Explain it without notes
Why does <canvas> need JavaScript, and what does getContext("2d") give you?
What is the difference between immediate mode (canvas) and retained mode (SVG), and when would you pick each?
Why can a canvas look blurry, and how do you fix it?
How do you make a canvas chart accessible?
Preview
Console
Nothing logged yet.Expected console output
Drew 3 bars from the table: [ 40, 70, 25 ]