10,000 dots: one fill instead of 10,000
Counts, not times: how many fill calls each way needs. The picture is a screenful of dots, one fill.
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.
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 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a loop that moves a dot 120 pixels a second to the right, wraps at x = 300, and stops after 3 seconds of animation time, using dt.
Write describeWeek(week) that returns the text for aria-label, including the busiest day, and handles an empty array.
Explain it without notes
Why use seconds and dt instead of pixels per frame?
Why clamp dt?
How do you avoid running two animation loops at once?
Preview
Console
Nothing logged yet.Expected console output
one path per dot: 10000 fill calls for 10000 dots
one path for all: 1 fill call for 10000 dots
after 0.5 s the first dot moved to x = 128.3 and every dot is still inside the canvas: true