mouse events to touch event for ipad compatibility

Question

i have this kids painting app which uses mouse events to paint on an image. However i need to convert mouse events to touch so that it could work on an ipad. Please can someone explain me how to do this. My app code is quite similar to this sample code http://cool-php-tutorials.blogspot.co.uk/2011/05/simple-html5-drawing-app-with-saving.html.

P.S my knowledge about javascript is not at an a advanced level so please if you can show me working code or examples will be a great help

My code which does the mouse event are as follows. Please can covert this functionality from mouse to touch.. please i am stuck at this since 2 days now.. :|

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();

// binding events to the canvas
$('#drawingCanvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;

  paint = true; // start painting
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);

  // always call redraw
  redraw();
});

$('#drawingCanvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

// when mouse is released, stop painting, clear the arrays with dots
$('#drawingCanvas').mouseup(function(e){
  paint = false;

  clickX = new Array();
  clickY = new Array();
  clickDrag = new Array();
});

// stop painting when dragged out of the canvas
$('#drawARobot').mouseleave(function(e){
  paint = false;
});


// The function pushes to the three dot arrays
function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}



// this is where actual drawing happens
// we add dots to the canvas


function redraw(){

  for(var i=0; i < clickX.length; i++)
  {  
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }
}

Answer 1

You can map it like this:

$('#drawingCanvas').bind("mousedown touchstart", function(e){

$('#drawingCanvas').bind("mousemove touchmove", function(e){

$('#drawingCanvas').bind("mouseup touchend", function(e){

And than finetune the code if needed.