block by veltman f539d97e922b918d47e2b2d1a8bcd2dd

Canvas scatterplot with mouse events

Full Screen

Canvas scatterplot w/ colorpicking for mouse events. Renders lots of dots on a <canvas> for speed, but uses a hidden canvas with a color-to-data dictionary to get the value under a mouse event. Hover over some dots.

Using nonrectangular shapes creates the chance of weirdness from antialiasing when triggered on the very edge of a shape. If you wanted to prevent them entirely you could verify that the resulting data center point is within r pixels of the current mouse position or you could sample additional pixels near the event.

This approach handles layer order and weird shapes, but if your points are all tiny dots, a quadtree approach is probably faster and more effective.

See also: Needles, Haystacks, and the Canvas API, WebGL Beginner’s Guide - Picking