Touch draw events and HTML5 Canvas

Question

I'm trying to write a canvas element that can be 'draw' on with the mouse and mobile (iOS/Android).

here is my bind code:

// Mouse based interface
    $(drawing.canvas).bind('mousedown', drawing.drawStart);
    $(drawing.canvas).bind('mousemove', drawing.draw);
    $(drawing.canvas).bind('mouseup', drawing.drawEnd);
    $('body').bind('mouseup', drawing.drawEnd);

    $(drawing.canvas).bind('touchstart', drawing.drawStart);
    $(drawing.canvas).bind('touchmove', drawing.draw);
    $(drawing.canvas).bind('touchend', drawing.drawEnd);

Works with computer (PC, Mac) but not mobile (iOS/Android). I also tried addEventListener for the touch* events but no joy.

Any ideas?

So you have tried canvas.addEventListener( 'touchstart', onTouchStart, false);? Ignore jQuery completely for now, just try to get that working. — Simon Sarris
adding the black rectangle code worked, but it didin't work for the drawing of lines,etc. So I wonder if it is the drawing functions that aren't working or something. — cbrulak
It most likely is something else that is causing the problem them. Start whittling things down in your code until you get a working version, then work back up from there. — Simon Sarris

Simon Sarris Simon Sarris · Accepted Answer · 2011-05-03T14:10:43

It is either a sytax error or a jQuery problem. Distilled down, canvas.addEventListener( 'touchstart', onTouchStart, false); works just fine for android:

http://jsfiddle.net/tQW2L/

(on touch it paints a large black rectangle to confirm that it works)

Touch draw events and HTML5 Canvas

1 Answers