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

screenY
The screenY coordinate refers to the point down from the system's screen (mon-
itor), independent of where the browser is relative to that. If the screen is, say, 800
pixels in height and the browser is set up with a height of, say, 100 pixels located
exactly 100 pixels below the top of the screen, then at touch a the half-way point
between the browser's viewport's top and bottom left corners would result in the
touch's screenY coordinate being 150.
Think about it, the browser's viewport has 100 pixels in height so that it's midpoint
is exactly 50 pixels below its origin. If the browser is exactly 100 pixels below the
screen's origin, that midpoint is 150 pixels below the screen's vertical origin.
The screenX and screenY attributes almost look like they don't take the browser's
coordinate system into account whatsoever. With that, since the origin the browser
bases its calculations off of its screen's origin, then it follows that a point returned by
screenX and screenY will never be less than zero, since there is no way we can
touch a point outside the screen's surface area and still have the screen detect that
point.
clientX
Similar to screenX , clientX coordinate refers to the offset from a touch location
from the browser's viewport's origin, independent of any scrolling within the page. In
other words, since the origin of the browser's viewport is its upper left corner, a touch
100 pixels to the right of that point corresponds to a clientX value of 100. Now, if
the user scrolls that page, say, 500 pixels to the right, then a touch to the right of the
browser's left border by 100 pixels would still result in a clientX value of 100, even
though the touch occurred at point 600 within the page.
clientY
The clientY coordinate refers to the point down from the browser's viewport origin,
independent of where within the page the touch occurred. If the page scrolls an ar-
bitrary amount of pixels to the right and to the bottom and a touch is detected at the
very first pixel to the right of the upper left corner of the browser's viewport and ex-
actly one pixel down, the clientY value would be calculated as 1.