Handling touch events

One of the great things about HTML5 is that you can write one application and it will work on many different devices. Canvas Pad works great as a desktop application where mouse events are available. But it would work just as well on a touch screen device. So let's add support for touch events to the application.

Touch events are similar to mouse events. One difference is that the user can touch the screen with more than one finger, so touch events may contain multiple points. So we will have to take that into consideration when handling them.

There are three basic touch events that browsers support.

• touchstart: We get this event when the user touches the screen. This is equivalent to the mousedown event.

• touchmove: We get these events after touchstart when the user moves his/her finger on the screen. This is equivalent to the mousemove event.

• touchend: We get this event when the user lifts his/her finger off the screen. This is equivalent to the mouseup event.

The touch...