Canvas svg dual layer hit dispatch
Skill kjuhwa/skills-hub/skills/frontend/canvas-svg-dual-layer-hit-dispatch
Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.
npx -y skills add kjuhwa/skills-hub --skill canvas-svg-dual-layer-hit-dispatchAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Composite scene from an animated `<canvas>` plus an overlaid `<svg>`, routing pointer events to the layer that owns each element class.
SKILL.md
1.8 KB, as published. Nobody here has run it
canvas-svg-dual-layer-hit-dispatch
Used in 17-inkwell-whale-atlas/app.js/index.html: <canvas id="sea"> renders continuously-animated paper bands, whales, and lantern halos via requestAnimationFrame, while <svg id="stars"> holds the small population of pickable stars with pointer-events:none on the SVG except target elements. Canvas click handler (cv.addEventListener("click",...)) normalizes coords via getBoundingClientRect() scaling ((clientX-r.left)*(W/r.width)) and runs manual hit-tests (Math.abs(dx)<w.len*.5 && ... for whales, squared-distance for lanterns). SVG click handler uses e.target.getAttribute("data-id") — cheap DOM-native picking for the tiny star set.
The trick is the split: canvas gives you dozens of animated primitives at 60fps, SVG gives you free hit-testing + accessibility for the handful of clickable items. Stars get <line> constellation edges drawn into SVG too, so they layer visually under lanterns because SVG sits under canvas in the DOM but above visually via pointer-events:none + explicit data-id. Both dispatch into a single show(title, body) panel, keeping inspect UX identical regardless of which layer the element lives on.
Apply when you have a scene with a many-cheap-animated-things layer and a few-interactive-things layer — pushing all picking into canvas forces manual AABB/circle tests for every click, and pushing everything into SVG tanks framerate past ~100 nodes. Split by cardinality and interactivity, not by visual role.