10,000 marks: elements against pixels
The timings are drawn on the page, not logged, because they change from machine to machine. About half of the marks are outside the 260 by 130 picture on purpose.
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?
Preview
Console
Nothing logged yet.Expected console output
marks in the data: 10,000
SVG circle elements in the page: 10,000
canvas elements in the page: 1
marks inside the picture: 2,483 (the rest are still elements)
elements you can click one by one: SVG 10,000 - canvas 0