Text: measure, shorten, align
The log prints decisions, not widths: widths depend on the fonts of the computer.
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
'WWWW' is wider than 'iiii': true | empty string width: 0
short name unchanged: true | long names end with an ellipsis: true | empty stays empty: true
every result fits: true