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 puter (PC, Mac) but not mobile (iOS/Android). I also tried addEventListener for the touch* events but no joy.

Any ideas?

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 puter (PC, Mac) but not mobile (iOS/Android). I also tried addEventListener for the touch* events but no joy.

Any ideas?

• javascript
• jquery
• html
• canvas

Share Improve this question Follow edited Jun 9, 2012 at 7:55 Darshan Rivka Whittle 34.1k77 gold badges9696 silver badges113113 bronze badges asked May 3, 2011 at 13:14 cbrulakcbrulak 15.6k2020 gold badges6363 silver badges101101 bronze badges 3

• So you have tried canvas.addEventListener( 'touchstart', onTouchStart, false);? Ignore jQuery pletely for now, just try to get that working. – Simon Sarris Commented May 3, 2011 at 14:05
• 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 Commented May 3, 2011 at 22:38
• 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 Commented May 3, 2011 at 23:51

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

http://jsfiddle/tQW2L/

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