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

• 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

1 Answer 1

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)