5.15 Anything Still Missing? 173from the new position. After about 40 seconds of playing time, the video is over,
ten new mini snapshots have been drawn, and we can restart the sequence all
over again by clicking on the canvas.
That’s it for now for our video postcard. But before we can finish this chapter, we
need to mention a few more topics.
5.15 Anything Still Missing?
The next section describes the method isPointInPath() and considers aspects of
accessibility and security in Canvas. The chapter concludes with a quick update
on the improved level of browser support and a selection of links for all those
who want to find out more about Canvas.
5.15.1 “isPointInPath(x, y)”
As you can guess from the method’s name, isPointInPath() returns either true
or false, depending on whether the point specified by the coordinates x/y is in-
side or outside of the current path. A brief example demonstrates the application
of this method; in this case, it returns true in alert():
context.beginPath();
context.rect(50,50,100,100);
alert(
context.isPointInPath(75,75)
);
One practical use of isPointInPath() is for determining if the user has clicked
on a particular area of the canvas. All we need for this is an onclick event han-
dler, which uses the mouse position in clientX/clientY and the position of the
canvas element in offsetLeft/offsetTop to calculate the current x/y position in
relation to the canvas area:
canvas.onclick = function(evt) {
context.beginPath();
context.rect(50,50,100,100);
alert(
context.isPointInPath(
evt.clientX - canvas.offsetLeft,
evt.clientY - canvas.offsetTop
)
);
};