The same circle as SVG and as Canvas
Look closely at the edges of the two circles in the preview: sharp on the left, soft on the right.
The browser can draw in two ways. SVG keeps every shape as an element you can find, style and click. Canvas paints pixels and forgets the shapes. Each is best at different jobs, and good chart developers use both.
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 second circle to both drawings in the first example (SVG: a new <circle> tag; Canvas: another beginPath/arc/fill). Then log how many elements each contains.
In the second example, write insideRect(x, y) for a rectangle drawn with ctx.fillRect(70, 20, 30, 40), and test (80, 30) and (60, 30).
Explain it without notes
Explain the difference between SVG and Canvas to someone who has never coded.
Why does the canvas circle look blurry when zoomed, but the SVG one doesn't?
You need a chart of 300 stations that people can click. Which would you choose, and why?
You need to draw every trip of a year (about 300,000 lines) and redraw it while panning. Which would you choose, and why?
Preview
Console
Nothing logged yet.Expected console output
Inside the SVG: 1 element -> circle
Inside the canvas: 0 elements
Pixel at the centre: [ 42, 157, 143, 255 ]
Pixel in a corner: [ 0, 0, 0, 0 ]