Question

I’m developing a HTML5 application and I’m looking for some JS library handling input on canvas elements, suitable for both desktop and mobile platforms (otherwise, what’s the point of html 5?)

Basically I need to drag shapes around, since it’s a drawing-like application, and dragging is also used to navigate in the canvas (this is so it’s more mobile friendly – they don’t have scrollbars). It would be nice if it supported pinch to zoom, too

I know kinetic.js and similar, but they seems to have separate libraries for mobile and desktop

Answer 1

Canvas doesn’t have elements, nor does a circle that you draw, for example, on a canvas have any events attached to it – it’s quite different from working in the DOM.

You need to keep track of the x/y positions of each of the ‘elements’ that you draw on your canvas, and when a mouse, or touch, event occurs, take the x/y position of that event and match it against the x/y position of your canvas ‘elements’.

However, what you’ll need to do also, it a bit of basic collision detection, so that the x/y positions of your input (mouse/touch) don’t have to match up exactly with the x/y position of your canvas ‘elements’.

Using Kinetic, though, you could fairly easily detect when you’re on a mobile device that has touch event support, and then alter the ‘mousedown’, ‘mouseup’, ‘click’, etc. events within Kinetic:

var _START, _MOVE, _END;
if('ontouchstart' in window) {
    _START = 'touchstart';
    _MOVE = 'touchmove';
    _END = 'touchend';
}
else {
    _START = 'mousedown';
    _MOVE = 'mousemove';
    _END = 'mouseup';        
}

…and then use _START/_MOVE/_END in Kinetic’s addEventListener function.

Hope that helps somewhat. Of course, do be careful setting global variables, it’s generally bad practice, and this is only an example.

Kinetic is here, and there’s a good write up of touch and gesture events (gestures for pinch/zoom) here.