How to zoom to center on any object in the canvas with onPinch

[Rajdeepc]

@dbismut
According to the example doc
https://codesandbox.io/s/oj203?file=/src/index.js:1170-1198

I am trying to build this functionality for any object in the canvas

This code below works with mousewheel event from fabric though

    console.log(opt)
      var delta = opt.e.deltaY;
      var zoom = canvas.getZoom();
      console.log(zoom)
      zoom *= 0.999 ** delta;
      if (zoom > 20) zoom = 20;
      if (zoom < 0.6) zoom = 0.6;
      canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);
      opt.e.preventDefault();
      opt.e.stopPropagation();

I am trying to replicate the exact same behaviour with onPinch. Apparently I cannot get opt.e.offsetX and offsetY to set zoomPoint
which doesnt seem to work.

[dbismut]

I'm not sure where you got that sandbox link but please refer to the GitHub repo for the source code of the latest sandbox:
https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom

The one you linked is from an old version of the lib

[Rajdeepc]

Yes it more or less the same as the previous one. But my use case is somewhat different. I cannot target an element with a domNode nor with a ref to get x, y co-ordinates.
Your examples works as expected for a single DOM element.

How can i get the exact same behaviour on a canvas with multiple elements?

My only ask is how can i get the x and y values from onPinch to set in the below statement

canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom);

[Rajdeepc]

I have figured it out

onPinch: ({   origin: [ox, oy] }) => {
// your code
  canvas.zoomToPoint({ x: ox, y: oy }, zoom);
  }

[dbismut]

Cool :) Mark whatever comment as an answer to close this ;)

[Rajdeepc]

https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom

Above code doesnt work for canvas. I changed animated.div into canvas and it doesnt work. Any idea on this?