Hello everyone, I am trying to develop a web site that needs an HTML5 canvas element where the user can create a drawing. This drawing is stored on a database. The site already works on IE6-8 (using FlashCanvas), IE9, Firefox, Safari, Opera and Chrome for Windows (I have not tested it on a Mac or Linux yet, but I assume I will get the same results as the windows versions of the browsers that are available in those OS's). Originally it only used mouse events. Then, I tested on the Ipad and it drew only a single spot and when dragging the finger through the screen, instead of continuing the drawing, the page scrolled. I did a little research and added touch events (touchstart, touchmove and touchend). It still does the same thing. The TouchStart, TouchMove and TouchEnd events do the same thing as the MouseDown, MouseMove and MouseUp events. The idea is that the same app should work on all browsers. The touch events did not affect the behavior on windows based browsers at all, which is a good thing.
Here is an excerpt of my code (I cannot show the full code because of confidentiality reasons)

This is inside the function that initializes the canvas:

canvas.addEventListener("touchstart", touchStart, false); canvas.addEventListener("touchmove", touchMove, false); canvas.addEventListener("touchend", touchEnd, false); Afterwards I have all the functions declared:

function touchStart(event){ //{function code here}
}


function touchMove(event){ //{function code here}
}

function touchEnd(event){ //{function code here}
}
Is there any thing I am doing wrong?
How else can I keep the page from scrolling when the user is trying to draw inside the canvas?

Thank you very much in advance for your help