Canvas events for path shapes

[techniq]

While a voronoi or quadtree can be used as a technique for single point events (i.e. tooltips), hit detection for paths/rects/etc (ex. GeoPath or Pie arcs) are more challenging.

Using the r-tree algorithm such as is available with Flatbush provides fast boundary box lookups, although you can get multiple results for overlapping boxes and will need to do a deeper compare (using something like geoContains())

Another technique is to draw a second (hidden) canvas with distinct colors and register data for each color in a lookup, and then use context.getImageData() to get the color for the pointer coordinates, and return the data. This has some challenges with canvas anti-aliasing on the edges, but is simpler (especially without needing a deeper comparison)

• Flatbush
  • https://github.com/mourner/flatbush
  • https://observablehq.com/@martgnz/using-flatbush-for-faster-canvas-maps
  • https://observablehq.com/@luissevillano/using-flatbush-for-faster-hover-events-in-canvas-maps
• Color picking
  • https://blocks.roadtolarissa.com/veltman/f539d97e922b918d47e2b2d1a8bcd2dd
  • https://observablehq.com/@camargo/canvas-picking-with-a-hidden-canvas
  • https://observablehq.com/@no-use-tech/canvas-renderer
  • Implemented as HitCanvas