Jan 232013
Article Javascript

In a previous post we have already explained how to draw with the mouse on a HTML5 canvas. The method presented there is not valid if the user reaches the page from a mobile device, because in that platform there is no mouse. Instead, the user interacts with the page by touching the screen with a finger.

In this post we will explain how to program in javascript the same functionality adapted to work on an Android, iPhone or similar mobile device.

Javascript touch events

When the user interacts with a web page using the mouse, mouse events are generated that can be captured and processed by the corresponding event handlers: “onclick”, “onmousemove”, etc.

When the user interacts with the page touching the screen on a mobile device, analogous events “touchstart”, “touchmove” and “touchend” are generated. Basically, a javascript application that handles mouse events can be converted into a mobile-enabled application by replacing the mouse events with their equivalent touch events.

Preventing the default behaviour

But, on  a mobile device, there is a default behaviour that is executed when the user touches and moves the finger on the screen. Tipically, in a browser this causes the window to scroll. To completely control the interaction, the javascript application must prevent this action from happening. This is achieved with a call to the “preventDefault()” method of the event.

Taking these considerations into account, we are almost ready to rewrite the code in our previous post to make it “mobile aware”.

Obtaining the original event from the jQuery event. targetTouches array

The previous code for the “onclick” event handler was:

In a mobile application, this code is converted into:

In this new code, the first sentence is a call to the “originalEvent” method of the “event” object received by the event handler. This is required because jQuery performs a normalization of the objects of type event, to ensure the compatibility between different browsers, and in this normalization some event attributes are dropped. But in the event handlers we need to access the “targetTouches” array, which is not included in the “normalized” event.

En este nuevo código podemos ver que la primera sentencia es una llamada a método “originalEvent” del objeto “event” que recibe el manejador de eventos. Esto es necesario porque jQuery realiza una normalización de los eventos para asegurar la compatibilidad entre distintos navegadores, y en esta normalización se pierden algunos atributos del evento. Pero en el manejador de eventos vamos a necesitar acceder al array “targetTouches”, que no está incluido en el evento”normalizado” por jQuery.

In a touch event, the “targetTouches” attribute is an array with the coordinates of the points on the screen where the users is touching. Normally, the array has a single element (with index zero), that we can use to retrieve the (pageX,pageY) values of the point where the touch has happened.

Besides, on the example code above we can also notice the call to “preventDefault()” to prevent the browser from scrolling the window.

Editing the other event handlers in the same way, we can convert the example in our previous post to work on mobile devices, and the final result is:

You can try to draw with the finger on this area while browsing this page from a mobile device.

 Posted by at 7:10 pm

 Leave a Reply