HTML5 and Mobile Game Development - Learn HTML5 by Creating Fun Games - page 375

The clientX and clientY attributes don't take the web page's coordinate system
into account whatsoever. With that, because this point is calculated relative to the
browser's frame, it follows that a point returned by clientX and clientY will never
be less than zero since there is no way we can touch a point outside the browser's
viewport surface area and still have the browser detect that point.
pageX
Finally, the coordinate represented by pageX refers to the point within the actual
page where the touch was detected. In other words, if a browser is only, say, 500
pixels wide but the application is 3000 pixels wide (meaning that we can scroll the
application's content to the right by 2500 pixels), a touch detected exactly 2000
pixels from the browser's viewport's origin would result in a pageX value of 2000.
In the world of gaming, a better name for pageX would probably be
worldCoordinateX since the touch takes into account where within the world the
touch event took place. Of course, this only works when the web page physically
scrolls, not when a representation of a scroll has taken place. For example, say we
render a world onto a 2D canvas and the world is actually much larger than the width
and height of the canvas element. If we scroll the virtual map by an arbitrary amount
of pixels but the canvas element itself never actually moved, then the pageX value
will be meaningless with respect to the game's map's offset.
pageY
And to conclude, the pageY coordinate refers to the point where the touch was de-
tected below the browser's viewport's origin, plus any scrolled offsets. As with the
other touch point locations, it is impossible to obtain a negative value for the pageX
and pageY attributes since there is no way to touch a point in the page that has not
been scrolled to yet, especially a point behind the origin of the page where we can-
not ever scroll to.
The following illustration shows the difference between screen, client, and page loc-
ation. The screen location refers to the location within the screen (not browser win-
dow), with the origin being the upper left corner of the display. Client location is sim-
ilar to screen location, but places the origin at the top left corner of the browser view-
port. Even if the browser is resized and moved half way across the screen, the first
pixel to the right of the browser viewport will be point (0, 0). Page location is similar