Name
CRC.isPointInPath() — tests whether a path encloses a point
Synopsis
boolean isPointInPath(floatx
, floaty
)
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. ...
Get Canvas Pocket Reference now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.