Hit testing determines whether a pointer location lies inside a shape drawn on a canvas. It turns coordinate math into hover interactions, tooltips, and data-rich visual feedback. section 14.1 section 14.4
Choose the boundary calculation that matches the shape:
- Test a rectangle by checking whether the pointer’s x-coordinate lies between its left and right edges and its y-coordinate lies between its top and bottom edges. section 14.1.2
- Test a donut slice by checking radial distance first, then comparing the pointer angle with the slice’s start and end angles. section 14.1.3
Interactive bar chart
Store each bar’s x, y, width, height, and data while drawing it. On pointer movement, compare the canvas-relative pointer coordinates with those boundaries; when a bar matches, display its label and value in a tooltip.
