Pen commands: lines, closing, relative
The numbers are measured by the browser (getTotalLength and getBBox), not calculated by hand.
A path is a shape drawn by pen commands written in one d string: move, line, curve, arc, close. Every line chart is one path, and a bad number in the string stops the drawing at that point with a console error.
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 5 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 d string for a house outline: start at (20, 80), go to (20, 40), then (50, 10), then (80, 40), then (80, 80), then close. Use only M, L and Z.
Write a function pathFor(points) where points is a list of [x, y] pairs and returns the d string with M then L commands. What should it return for an empty list, and what would d="" draw?
Explain it without notes
What is the difference between L 60 20 and l 60 20?
Why does the browser print nothing when a path starts with L?
What do the two flags of an arc decide?
What happens to a chart line when one value is NaN?
Preview
Console
Nothing logged yet.Expected console output
Closed with Z: 305.9 | open, no Z: 205.9
Absolute and relative triangle, box: 100 x 90 and 100 x 90
Rectangle from H and V, length: 320.0
Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "L 50 50 L 90 10".
A path that starts with L has length 0