Canvas Pocket Reference

Name

CRC.isPointInPath() — tests whether a path encloses a point

Synopsis

boolean isPointInPath(float x, float y)

Arguments

x,y

The point to be tested. Note that these are in raw canvas coordinates, and are not transformed by the current transformation matrix.

Returns

true if the specified point falls within or on the edge of the current path, and false otherwise.

Description

isPointInPath() tests whether the specified point is inside (or on the boundary of) the current path. The specified point is not transformed by the current transformation matrix. x should be a value between 0 and canvas.width and y should be a value between 0 and canvas.height.

Example

The reason that isPointInPath() tests untransformed points is that it is designed for “hit testing”: determining whether a user’s mouse click (for example) is on top of the portion of the canvas described by the path. In order to do hit testing, mouse coordinates must first be translated so that they are relative to the canvas rather than the window. If the canvas’s size on the screen is different than the size declared by its width and height attributes (if style.width and style.height have been set, for example) then the mouse coordinates also have to be scaled to match the canvas coordinates. The following function is designed for use as an onclick handler of a <canvas> and performs the necessary transformation to convert mouse coordinates to canvas coordinates:

// An onclick handler for a canvas tag. // Assumes a path is currently defined. ...