I’m using fabricjs-react to work with canvas, allowing users to upload an image, drag it around, and save it as JSON. I’ve implemented most functions, but maintaining the aspect ratio of the canvas and its objects isn’t working as expected. Resizing the canvas cuts off the sides, and when loading from JSON, the position isn’t right. I haven’t found any examples that address these issues and could use some assistance.

Resizing the canvas and its object and loading that object from JSON is being challenge for this one.

{
      id: 1,
      product_image: {
        front: {
          image: '/front.png',
          json: {},
        },
  },
}

I am saving the added objects and background image in front -> json so I can load that when going back to view.

I have attached the codesandbox link here so anyone can guide me through

https://codesandbox.io/p/sandbox/fabric-js-sjvx7l

Thanks in advance for your precious time.