'Why top and left properties become negative after selection fabricjs?

In fabricjs all the objects within the canvas has their own top and left properties, but when I make a selection (with shift+click or dragging) the top and left values for all the objects inside the selection lose their original values.

There is a simple code snippet explaining my problem https://jsfiddle.net/kj7qy6a8/

I want to know or calculate the actual top and left for all the objects within a selection, not relative values.

I will paste the code here in case you wanna try directly here.

const canvasElmt = document.getElementById('myCanvas');

const canvas = new fabric.Canvas(canvasElmt, {
  width: 500,
  height: 500
});

let text1 =  new fabric.Textbox('text1', { top: 20, left: 40 });
let text2 =  new fabric.Textbox('text2', { top: 100, left: 60 });
canvas.add(text1);
canvas.add(text2);

canvas.renderAll();

// button onclick
document.getElementById('btn').onclick = () => {
  const infoElmt = document.getElementById('info');
  infoElmt.textContent = '';

  canvas.getObjects().forEach(({text, top, left}) => {
    infoElmt.innerText += `${text} TOP: ${top} LEFT: ${left}\n`;
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fabricjs test</title>

    <style>
        .canvas-container{border: 2px solid;}
        button{padding: 7px; background: lightgreen; font-weight: bolder;}
    </style>

</head>
<body>
     
    <h1>Steps to reproduce the error:</h1>
    <ol>
        <li>click the "check top and left" button</li>
        <li>select both object (text1 and text2)</li>
        <li>once the objects have been selected, press the button again.</li>
        <li>now you can see the top and left values are negative or wrong</li>
    </ol>

    <canvas id="myCanvas"></canvas>

    <button id="btn">Check top and left</button>
    <div id="info"></div>

    <script src="https://unpkg.com/[email protected]/dist/fabric.min.js"></script>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Why top and left properties become negative after selection fabricjs?

Sources

Related Questions