A draggable station scene in Konva 10
Drag a circle, or click one. The Console shows the scene answering questions, the hit canvas that updates only on draw, and bubbling.
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
Konva 10.7.1
layers: 1 | shapes in the layer: 6
find by name: 6 | find by id: 112
hit-test at the centre of S01 -> S01
hit-test on empty space -> null
fired a click from code, handler ran: true
hit-test before the new shapes are drawn -> null
on top at the overlap: B
after A.moveToTop(): A
the layer heard a click from: B
after destroy, shapes in the layer: 7