FabricJS Canvas Coordinates on Touch

Question

I am using Fabricjs package with events to get attempt to capture user coordinates when they tap the canvas.

This is the code:

Html

<div id="c-wrapper">
      <canvas id="c"></canvas>
</div>

Javascript

var canvas = new fabric.Canvas("c");
canvas.on({
    "mouse:down": function (o) {
            var pointer = canvas.getPointer(o.e);
            console.info("Mouse Coords: "+pointer.x+" "+pointer.y);
    },
    "touch:longpress": function (ev) {
            console.info("Touch Coords: "+ev.self.x+" "+ev.self.y);
    },
});

When i load the page in responsive mode (both Chrome and Safari as well as device emulator) and test the touch feature i get coordinates that are incredibly different.

e.g.

Console output:
Canvas of size 2835 x 2004;

Mouse Coords: 1475 x 1220
Touch Coords: 470 x 388

They are very different results as you can see.

How can i get the actual coordinates of fabric Canvas object when user does a longpress touch event?

Answer 1

This will get you the current position.

let e = event.e.touches ? event.e.touches[0] : event.e;
canvas.getPointer(e)

Answer 2

 canvas.on('touch:drag', function(e){
let touch = e.e.touches ? e.e.touches[0] : e.e;
   TouchposX=canvas.getPointer(touch).x
   TouchposY=canvas.getPointer(touch).y
}

Credit to Exlord for helping me figure it out