The forgotten beginPath
A failure that prints no error: the picture is wrong, and the only clue is the colour.
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.
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.
Draw a polyline for the numbers [3, 5, 2, 6] on a 200 × 100 canvas, one x step of 50 pixels, with a round line join and a 3-pixel width.
Write dot(ctx, x, y, r) that paints one filled circle and cannot leak into other drawings.
Explain it without notes
Why does a second line change colour if beginPath() is missing?
What is the difference between how fill() and stroke() treat an open path?
How do you shorten a canvas label to fit a width?
Preview
Console
Nothing logged yet.Expected console output
wrong: Monday's line is now rgb(42,157,143), Tuesday's is rgb(42,157,143)
right: Monday's line is now rgb(231,111,81), Tuesday's is rgb(42,157,143)