5,000 shapes: layers, listening and cache
The first-draw time is shown on the page, not logged. The background dots are on a layer that takes no events: a hit-test there finds nothing.
A scene graph keeps shapes as objects with events, dragging and layers, and draws them onto canvas for you. Konva is one. It saves the hit-testing and redraw code you wrote by hand and costs memory per shape. Choose it when users edit the picture.
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.
In the first example, make clicking an empty spot reset every circle's colour. Which object do you listen on?
Add a dragmove listener that keeps a station inside the 420 by 200 stage.
Explain it without notes
What does a scene graph give you that plain canvas does not?
Why did getIntersection return null right after adding shapes, and what does listening: false save?
Preview
Console
Nothing logged yet.Expected console output
nodes in the scene graph: 5,001 - canvas elements Konva made: 2
dots layer listening: false | a hit-test on a dot -> null
hit-test on the handle -> handle
before cache, group cached: false
after cache, group cached: true
the cached bitmap still shows the old colour until you call cache() again: true
after clearCache(): false
empty layer children: 0 | hit-test there: null
layers now: 2