Necesito centralizar la imagen de fondo dentro del lienzo en función del factor de zoom manteniendo la relación de aspecto de la imagen y sin recortarla. Lo intenté de esta manera, pero se recorta (no se puede ver la imagen completa). Así es como lo he hecho y así es como se ve

 import { fabric } from "fabric"; import "./styles.css"; document.getElementById("app").innerHTML = ` <div> <canvas class="canvas" id="conCanvas"></canvas> </div> `; let canvas = new fabric.Canvas("conCanvas"); let zoomedScaleFromServer = 1.5; canvas.setHeight(window.innerHeight); canvas.setWidth(window.innerWidth); // let imgWidth, imgHeight; fabric.Image.fromURL( "https://media.istockphoto.com/photos/modern-interior-design-floor-plan-3d-render-picture-id1210637949?b=1&k=20&m=1210637949&s=170667a&w=0&h=_AYB0vxwWWVFSUjaNpVb3X88ybQLLXtdNJUW8IllR1E=", function (img) { canvas.setBackgroundImage( img, () => { canvas.renderAll(); // imgWidth = img.width * img.scaleX; // imgHeight = img.height * img.scaleY; } // { FIX : Aspect ratio // scaleX: canvas.width / img.width, // scaleY: canvas.height / img.height // } ); // canvas.centerObject(img); canvas.setWidth(img.width * zoomedScaleFromServer); canvas.setHeight(img.height * zoomedScaleFromServer); canvas.zoomToPoint( new fabric.Point(canvas.width / 2, canvas.height / 2), zoomedScaleFromServer ); } );

Aquí también está el sandboxhttps://codesandbox.io/s/festive-water-izl19?file=/src/index.js