Touchpaint – A Web based Painting for the iPad

A portrait of me by a friend.

The JavaScript touch APIs can be used with the canvas tag to easily create a painting application in a web page that work in multiple clients which include the iPad / iPhone / and Nexus One. Given the iPad will have such a large working are a touch painting application would be very fun.

The Touchpaint application which you can find here is pretty straight forward. The key code for event tracking is :

function move( e ) {  
  if ( _widget.drawing ) {  
      var te =  e.touches.item(0);  
      var _current = { x : te.clientX - _widget.pos.x, y : te.clientY - _widget.pos.y };  
      if ( _widget.last !== null) {  
              _widget.drawLine( _widget.last, _current );  
      }  
      _widget.last = _current;  
    }  
    e.preventDefault();  
}  

The main code of interest is the access to the e.touches to get the location of the touch event and the e.preventDefault(); which prevents the event from propagating to the page and causing a page scroll.

And for non touch users the equivalent is :

function moveMouse( e ) {  
  if ( _widget.drawing ) {  
      var _current = { x : e.pageX - _widget.pos.x, y : e.pageY - _widget.pos.y };  
      if ( _widget.last !== null) {  
              _widget.drawLine( _widget.last, _current );  
      }  
      _widget.last = _current;  
    }  
    e.preventDefault();  
}  

In a future post I will show how to store the drawing in the HTML 5 based local storage and or send to a server component. For now if you want to play with the source go to http://gregmurray.org/ipad/touchpaint.

Advertisement