Question about A Sketching Website on the IPAD, Dragging and Touching

Question

I've been testing out the new functionality of html5 and js to create a sketching site. I've been looking into this for a possible client that wants their site to be ipad accessible, but also have drawing features on it.

So i created a rough experiment where you can drag your mouse across a screen to draw lines. I went to test it on an ipad and realized this doesn't work. Why? because dragging on an ipad is reserved for actually dragging the screen around.

Is there something you can do to get around this? I'm sure this could be done if made for an app, but what about just a normal website.

Answer 1

In your code, replace your events like that:

• onmousedown => ontouchstart
• onmousemove => ontouchmove
• onmouseup => ontouchend

At least that is how it works on iPhones. Further reading: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Answer 2

Shameless self promotion - I developed a jQuery plugin for drawing on a website via HTML5 for the purpose of collecting signatures on the iPad screen. http://www.crowdsavings.com/open-source/drawbox