fabric.JS - Zoom In/Out and Move canvas not working on mobile phone - html5-canvas

Question

I'm using fabric.JS (custom built to include touch events), I'm facing issue with touch events.
Zoom In/Out is working on mouse wheel but not working on mobile touch screen
I can move canvas using Alt+Left click but on mobile touch screen I'm not able to move canvas
My Working code on codepen Click here
var canvas = new fabric.Canvas('step1');
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'blue', angle: 10 }))
canvas.add(new fabric.Circle({ radius: 50, fill: 'red', top: 44, left: 80 }))
canvas.add(new fabric.Ellipse({ rx: 50, ry: 10, fill: 'yellow', top: 80, left: 35 }))
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: 'purple', angle: -19, top: 70, left: 70 }))
canvas.add(new fabric.Circle({ radius: 50, fill: 'green', top: 110, left: 30 }))
canvas.add(new fabric.Ellipse({ rx: 50, ry: 10, fill: 'orange', top: 12, left: 100, angle: 30 }))
//handle Zoom
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var zoom = canvas.getZoom();
zoom *= 0.999 ** delta;
if (zoom > 20) zoom = 20;
if (zoom < 0.01) zoom = 0.01;
canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
});
//handle pan click with Alt key press
canvas.on('mouse:down', function(opt) {
var evt = opt.e;
if (evt.altKey === true) {
this.isDragging = true;
this.selection = false;
this.lastPosX = evt.clientX;
this.lastPosY = evt.clientY;
}
});
canvas.on('mouse:move', function(opt) {
if (this.isDragging) {
var e = opt.e;
var vpt = this.viewportTransform;
vpt[4] += e.clientX - this.lastPosX;
vpt[5] += e.clientY - this.lastPosY;
this.requestRenderAll();
this.lastPosX = e.clientX;
this.lastPosY = e.clientY;
}
});
canvas.on('mouse:up', function(opt) {
// on mouse up we want to recalculate new interaction
// for all objects, so we call setViewportTransform
this.setViewportTransform(this.viewportTransform);
this.isDragging = false;
this.selection = true;
});
//handle gustures
var info = document.getElementById('info');
canvas.on({
'touch:gesture': function(e) {
var text = document.createTextNode(' Gesture ');
info.insertBefore(text, info.firstChild);
},
'touch:drag': function(e) {
var text = document.createTextNode(" dragging ");
info.insertBefore(text, info.firstChild);
},
'touch:orientation': function() {
var text = document.createTextNode(' Orientation ');
info.insertBefore(text, info.firstChild);
},
'touch:shake': function() {
var text = document.createTextNode(' Shaking ');
info.insertBefore(text, info.firstChild);
},
'touch:longpress': function() {
var text = document.createTextNode(' Longpress ');
info.insertBefore(text, info.firstChild);
},
});
<div id="info"></div>
<div id="canvasWrapper">
<canvas id="step1" width="400" height="400" style="border: solid gray thin;"></canvas>
</div>

Answer 1

ClientX and ClientY positions for touch devices will not be available in evt object directly. You have to access those from evt.touches
Your updated code may look like
canvas.on('mouse:down', function(opt) {
var evt = opt.e;
this.isDragging = true;
this.selection = false;
if(evt.type === 'mousedown' && evt.altKey === true){
this.lastPosX = evt.clientX;
this.lastPosY = evt.clientY;
}
if(evt.type === 'touchstart' && evt.touches && evt.touches.length === 1){
this.lastPosX = evt.touches[0].clientX;
this.lastPosY = evt.touches[0].clientY;
}
});
canvas.on('mouse:move', function(opt) {
var e = opt.e;
if (this.isDragging) {
if(e.type === 'mousemove'){
vpt[4] += e.clientX - this.lastPosX;
vpt[5] += e.clientY - this.lastPosY;
this.requestRenderAll();
this.lastPosX = e.clientX;
this.lastPosY = e.clientY;
}
if(e.type === 'touchmove' && e.touches && e.touches.length){
vpt[4] += e.touches[0].clientX - this.lastPosX;
vpt[5] += e.touches[0].clientY - this.lastPosY;
this.requestRenderAll();
this.lastPosX = e.touches[0].clientX;
this.lastPosY = e.touches[0].clientY;
}
}
});