I'm new to Fabric.js and I've been able to create an application in PHP/MYSQL that loads preselected images into a predefined canvas. It works well and the user is able to move around the images they selected within the canvas. I need a way for them to save their "project" so that once they close and come back to open their project. Everything is exactly where they left them. I imagine I need to capture the width, height, left, top details of each object and save them in a table in json format so that it loads the items as they were.

I really don't know how to go about it. Here's a snippet of my code. HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>

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

<script>
   
   
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas('canvas', {
         backgroundColor: '#fff'
      });
      

      <?php

$query = "SELECT * FROM products p, project_letters l WHERE l.product_id =p.product_id and l.project_id = $p ORDER BY l.letter DESC";
$mres = mysqli_query($Connection, $query);
$NumOfimages = mysqli_num_rows($mres);

if ($NumOfimages > 0) {
    while ($row= mysqli_fetch_array($mres)) {
?>
function addImage<?php echo $row['pl_id']; ?> () {
    fabric.Image.fromURL('images/products/<?php echo $row['image']; ?>', function (img) {
        img.scale(0.1).set('flipX', false);
        canvas.add (img);
    }, {
    left: 10,
    top: 10
});
}

addImage<?php echo $row['pl_id']; ?>();

<?php }}?>
      canvas.setWidth(<?php echo $WIDTH ?>);
      canvas.setHeight(<?php echo $HEIGHT ?>);
      
      var link = document.createElement('a');
    link.innerHTML = 'Export as image';
link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "<?php echo $project['project_title'] ?>.png";
}, false);
document.body.appendChild(link);
      
</script>

Please note the width and height of the canvas are already predefined with PHP. I'm using PHP to loop through the images for that particular project. The images appear successfully on the canvas and can be moved. So now I'd like to be able to:

1- Dynamically load the width, height, left and top of every image
2- Capture the new width, height, left and top if the user moves the image on the canvas and save it to mysql table
3 - Save the entire canvas as an image with the new coordinates.

Any help will be appreciated. I'm not very good with JavaScript.