A chooser with its edge cases
The limits are rules of thumb from one machine. The table includes the edges: no marks, one mark, NaN, a huge number, and clickable marks.
SVG keeps one page element per mark, and the browser pays for every one. Canvas keeps one element and a grid of pixels. You measure the difference on your own device and learn where each one breaks before you choose.
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.
Change the chooser so 800 marks that change 60 times a second are advised canvas, while 800 static marks stay SVG. (Run it with both cases to prove it.)
Write insideView(marks, width, height) that returns how many marks are inside the picture, and 0 for an empty array.
Explain it without notes
Why does an SVG with 10,000 circles cost more than a canvas with 10,000 dots that looks the same?
Which things does SVG give you for free that canvas does not?
Console
(nothing was printed)Expected console output
0 marks, clickable true, 0 updates a second: nothing to draw: show an empty-state sentence
1 marks, clickable true, 0 updates a second: SVG: every mark is an element with its own events and focus
25 marks, clickable true, 0 updates a second: SVG: every mark is an element with its own events and focus
365 marks, clickable false, 0 updates a second: SVG: small enough, easy to inspect and style
3000 marks, clickable false, 0 updates a second: SVG works if the chart never changes: measure first
10000 marks, clickable true, 0 updates a second: Canvas: one element, you redraw it and hit-test it yourself
10000 marks, clickable true, 60 updates a second: Canvas: one element, you redraw it and hit-test it yourself
100000 marks, clickable false, 60 updates a second: WebGL: 6,000,000 mark-draws a second is too many for 2D canvas
200000 marks, clickable false, 0 updates a second: Canvas for a still picture, WebGL if it moves or zooms
NaN marks, clickable true, 0 updates a second: invalid: marks must be a number, 0 or more