We're going to need to detect the start of a touch, and remember whereabouts it started. So we
declare a couple of variables to hold this information.
var Touch_Start_x; // to keep track of where the touch starts
var Touch_Start_y;
Then we
create a function that will be called when a touch starts. We calculate the
coordinates of the touch within the canvas, and
store the result in the variables we'd just declared.
(If you haven't already done the section on "sensing the mouse and touches", you might find this code a bit bewildering and it might be wise to go back and revisit earlier sections you might have skipped.
function MyTouchStartHandler(MyEvent) {
var rect = myCanvas.getBoundingClientRect(); // determine where our canvas is located
Touch_Start_x = MyEvent.touches[0].clientX - rect.left; // convert the first touch coordinates...
Touch_Start_y = MyEvent.touches[0].clientY - rect.top; // ...and store in variables
MyEvent.preventDefault() // don't let the browser also hear the touches
}
Finally, we add a listener so our function gets called for
touchstart events.
addEventListener("touchstart", MyTouchStartHandler); // call our handler when touches start