In fabric.js how do I get the position of the mouse coordinates relative to the background image, not the canvas.getPointer

Question

How do I get the absolute coordinates of where the mouse is pointed relative to the background image.

I have a image that is 1024 X 1035 that is scaled to a canvas that is 400x400

I want to get position of of the mouse coordinates relative to the background image (not the canvas.getPointer())

fabric.Image.fromURL(backgroundImageUrl, function(img) {
    // add background image
    canvas.setBackgroundImage(img, function() {
    canvas.requestRenderAll();
    imgWidth = img.width * img.scaleX;
    imgHeight = img.height * img.scaleY;
    }, {
        scaleX: canvas.width / img.width,
        scaleY: canvas.height / img.height
    });
});

Here is a link to a fiddle to represent what I did https://jsfiddle.net/fnvwjxpu/34/

Answer 1

Why don't transform the background image to an image object? I think the way to achieve it is by subtracting the object's top and left value from the canvas's top, left values. Once you have these values, you can find the mouse coordinate on the original image by dividing it by its scale value.

canvas.on('mouse:move', function(opt) {
    console.log('Absolute X coordinate: ' + opt.e.layerX);
    console.log('Absolute Y coordinate: ' + opt.e.layerY);

    if (opt.target !== null) {
        var objectMouseXRelativePosition = opt.e.layerX - opt.target.get("top");
        var objectMouseYRelativePosition = opt.e.layerY - opt.target.get("left");

        var objectMouseXAbsolutePosition = objectMouseXRelativePosition / opt.target.get("scaleX");
        var objectMouseYAbsolutePosition = objectMouseYRelativePosition / opt.target.get("scaleY");

        console.log('Current object X coordinate: ' + objectMouseXRelativePosition);
        console.log('Current object Y coordinate: ' + objectMouseYRelativePosition);

        console.log('Coordinate X on the original image: ' + objectMouseXAbsolutePosition);
        console.log('Coordinate Y on the original image: ' + objectMouseYAbsolutePosition);
    }
});

You might need to do some checks that it doesn't set a value higher than the original image, as this calculation is approximate.

Please check this working example: https://codesandbox.io/s/stackoverflow-60364941-fabric-js-362-0pc4d