Paths, arcs, line ends and joins
Every claim is a pixel read from the picture, not a guess.
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
open triangle, middle of the missing left side: 0,0,0,0
closed triangle, middle of the closing left side: 42,157,143,255
clockwise half (bottom) at (270, 65): 42,157,143,255 (top) at (270, 15): 0,0,0,0
anticlockwise half (top) at (340, 15): 42,157,143,255
4 px before the start of a 16 px line (corner: 7 px before, 7 px above) -> butt: middle empty, corner empty | round: middle covered, corner empty | square: middle covered, corner covered