1.15. Hit Detection

The method isPointInPath() determines whether a specified point falls within (or on the boundary of) the current path, and returns true if so or false otherwise. The point you pass to the method is in the default coordinate system and is not transformed. This makes this method useful for hit detection: determining whether a mouse click occurred over a particular shape.

You can’t pass the clientX and clientY fields of a MouseEvent object directly to isPointInPath(), however. First, the mouse event coordinates must be translated to be relative to the canvas element rather than the Window object. Second, if the onscreen size of the canvas is different than its actual dimensions, the mouse event coordinates must be scaled appropriately. Example 1-9 shows a utility function you can use to determine whether a given MouseEvent was over the current path.