Edge cases: no fill, and a canvas sized only with CSS
Neither mistake prints an error. Look at the preview: a black circle, a correct one, and a squashed oval.
Draw a smiling face twice: once with SVG tags (a circle, two eyes and a curved path) and once with Canvas commands. Along the way you meet the coordinate grid, fill and stroke, and the mistakes everyone makes first.
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.
Add a nose to the SVG smiley: a small circle (radius 6) halfway between the eyes and the mouth, in the middle of the face.
Make the Canvas smiley wink: replace the right eye with a short curved line instead of a dot.
Explain it without notes
Where is the point (0, 0), and which way does y grow? Why does it matter for charts?
What is the difference between fill and stroke? What happens if you set neither on an SVG circle?
What does the Q in M 60 120 Q 100 160 140 120 do, and how would you make the smile deeper?
Why did the CSS-only canvas draw an oval?
Preview
Console
Nothing logged yet.Expected console output
SVG circle fill: rgb(0, 0, 0)
right: drawing grid 90x90 shown at 90x90
css-only: drawing grid 300x150 shown at 90x90