The redraw loop: time-based and safe
The log shows counts and positions, never frame times, because real timings differ on every computer.
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
30 frames a second, 1 second later: x = 110
60 frames a second, 1 second later: x = 110
144 frames a second, 1 second later: x = 110
one frame after a 30 s pause moves the dot by 10 px (clamped)
stopped after 5 frames; no frame is scheduled now