Faster Canvas Picking - HTML5 Game Development Insights - page 79

Convex hulls have been used for years in game development as a rough estimation of shape for 2D and 3D
objects; they're especially useful in physics engines, where calculating the intersection of concave objects is roughly
2x slower than intersection of convex ones. Figure 5-6 shows a convex hull of one of the example sprites.
Figure 5-6. A convex hull in action. Advanced data structures can accelerate your picking code, while in some cases
sacrificing resolution perfection
Once the mouse selection is pressed, you'll test the mouse-point against the convex hull of sprite instances to
determine if it's inside or outside a target object.
You will lose some resolution on this process; that is, your results won't be pixel-perfect any longer, but there's
a whole separate discussion about how precise your picking code needs to be, especially on mobile, where pixels are
(generally) smaller than peoples' fingers. Figure 5-7 illustrates the difference in precision for the different selection
methods.
Figure 5-7. Bounding box, pixel-perfect, and convex hull regions for the same image. Notice that convex hulls are
smaller than bounding boxes, but larger than pixel-perfect. This trade-off allows it to be both semi-fast and
semi-accurate when needed