Colour picking with a hidden canvas
The dashed canvas is the hidden one, shown so you can see it: its colours are ids 1 to 4, so it looks black. The alpha check in pick is explained in Break it.
A canvas draws pixels and keeps no shapes, so it cannot tell you what was clicked. You find the mark under the pointer yourself, with the browser's shape test, a hidden colour canvas, a quadtree or a Delaunay diagram.
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.
Write stationAtPoint(stations, x, y, reach) using a quadtree built inside it, returning the station or null.
In the second example, make the hover text say edge when the pixel is partly transparent, nothing when empty, and the name only when alpha is 255.
Explain it without notes
Why can you not add a click handler to one dot on a canvas?
Compare isPointInPath and colour picking: when would you choose each?
Preview
Console
Nothing logged yet.Expected console output
on Quay only: Quay
where Quay and Market overlap: Market
on Chapel: Chapel
empty space: null
outside the canvas: null