Así que estoy trabajando en este editor donde un usuario puede cargar una imagen y editarla en el lienzo. Para lograr esto estoy usando React y FabricJS. Además de todo lo que he intentado hacer como editor, FabricJS parecía tener lo que busco. Y como FabricJS no tiene soporte nativo para reaccionar, he estado buscando una solución para que funcione con React. Y me topé con esta respuesta aquí y traté de usarla.

Este enlace personalizado de esa respuesta elimina otro problema que es agregar múltiples envoltorios de lienzo anidados.

En este momento funciona bien si solo uso un color de fondo, pero arroja un error cuando intento agregar una imagen de fondo. Parece que el objeto de tela no es accesible. Y no estoy seguro de cómo puedo acceder a él.

Aquí está el error:

 TypeError: Cannot read properties of undefined (reading 'fromURL')

Así que estoy publicando aquí si alguien tiene una idea sobre cómo agregar una imagen de fondo o diferentes formas al lienzo usando el objeto de tela pero también usando este gancho, ya que elimina las envolturas de tela anidadas.

Aquí está el CodeSandbox .

Aquí está el código:

 import { useCallback, useRef } from "react"; import { fabric } from "fabric"; const useFabric = (onChange) => { const fabricRef = useRef(); const disposeRef = useRef(); return useCallback((node) => { if (node) { fabricRef.current = new fabric.Canvas(node); if (onChange) { disposeRef.current = onChange(fabricRef.current); } } else if (fabricRef.current) { fabricRef.current.dispose(); if (disposeRef.current) { disposeRef.current(); disposeRef.current = undefined; } } }, []); }; export default function App() { const ref = useFabric((fabricCanvas) => { fabricCanvas.backgroundColor = "green"; // fabricCanvas.Image.fromURL("https://i.imgur.com/8zvUjul.jpg", function ( img ) { // fabricCanvas.add(img); // fabricCanvas.sendToBack(img); // }); fabricCanvas.renderAll(); }); return ( <div> <canvas ref={ref} id="canvas" /> </div> ); }