fabricjs programmatically pan canvas on mobile browser - fabricjs

Question

I have a website with fabric and it renders fine a pdf(as images). with mobile browser it displays fine and I enabled allowtouchscrolling and can pan the image (almost equal to scroll but not as effective as scrolling) . I have annotations on the image rendered which user has to respond. as of now its tedious to find each annotation object. Is there a way I can programmatically pan the fabric canvas centered to a specific x,y?
thanks
prem

Answer 1

Pan canvas so that [0,0] appears in center of viewport.
To achieve this do canvas.absolutePan(new fabric.Point(-canvas.getWidth() / 2, -canvas.getHeight() / 2)
And then additionally offset canvas to your object coordinates (in my example I use [left,top] + [halfWidth, halfHeight] to calc offset of object center.
Thus conclude making canvas.absolutePan to [-canvas.getWidth() / 2 + obj.left + obj.width / 2, -canvas.getHeight() / 2 + obj.top + obj.height / 2
Working example you may find here: http://jsfiddle.net/mmalex/2rsevdLa/
function panTo(canvas, obj) {
let w = canvas.getWidth();
let h = canvas.getHeight();
let targetX = obj.left + obj.width / 2;
let targetY = obj.top + obj.height / 2;
canvas.absolutePan(new fabric.Point(-w/2+targetX, -h/2+targetY))
}
function recenterCanvas() {
panTo(canvas, refRect);
canvas.bringToFront(refRect);
canvas.renderAll();
}