Curves and the four arcs
The four coloured arcs start at the same point and end at the same point. The grey dashed lines show where the control points pull.
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
large=0 sweep=0: top 250, bottom 270, width 80
large=0 sweep=1: top 230, bottom 250, width 80
large=1 sweep=0: top 250, bottom 330, width 100
large=1 sweep=1: top 170, bottom 250, width 100
Radius 10 between points 80 apart still draws: width 80, height 40