A abordagem mais simples é usar uma biblioteca JavaScript multitoque como o Hammer.js . Então você pode escrever um código como:
canvas
.hammer({prevent_default: true})
.bind('doubletap', function(e) { // And double click
// Zoom-in
})
.bind('dragstart', function(e) { // And mousedown
// Get ready to drag
})
.bind('drag', function(e) { // And mousemove when mousedown
// Pan the image
})
.bind('dragend', function(e) { // And mouseup
// Finish the drag
});
E você pode continuar. Ele suporta toque, toque duplo, deslize, segure, transforme (ou seja, belisque) e arraste. Os eventos de toque também são acionados quando ações equivalentes do mouse acontecem, para que você não precise gravar dois conjuntos de manipuladores de eventos. Ah, e você precisa do plugin jQuery se quiser escrever da maneira jQueryish como eu fiz.