JSFiddle - React, Tailwind, and code Playground

HTML

<!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/fabric@5.2.1/dist/fabric.min.js"></script>

</body>
</html>

JavaScript

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`;
  });
}