🙌 How do I render a JavaScript object retrieved from the database onto my fabric.js canvas? Help Please 🙏🥺

[mdpahlovi]

In the previous version (version 5), I used to do it this way. How can I do this in version 6,

// render canvas objects coming from storage on canvas
export const renderCanvas = ({ fabricRef, shapes }: RenderCanvas) => {
    console.log(shapes);

    // clear canvas
    fabricRef.current?.clear();

    // render all objects on canvas
    shapes.forEach((object) => {
        /**
         * enlivenObjects() is used to render objects on canvas.
         * It takes two arguments:
         * 1. objectData: object data to render on canvas
         * 2. callback: callback function to execute after rendering objects
         * on canvas
         *
         * enlivenObjects: http://fabricjs.com/docs/fabric.util.html#.enlivenObjectEnlivables
         */
        fabric.util.enlivenObjects(
            [object],
            (enlivenedObjects: fabric.FabricObject[]) => {
                enlivenedObjects.forEach((enlivenedObj) => {
                    // add object to canvas
                    fabricRef.current?.add(enlivenedObj);
                });
            }
            /**
             * specify namespace of the object for fabric to render it on canvas
             * A namespace is a string that is used to identify the type of
             * object.
             *
             * Fabric Namespace: http://fabricjs.com/docs/fabric.html
             */
        );
    });

    fabricRef.current?.requestRenderAll();
};

[lance-lfx]

In fabricjs v6, all functions are now returning Promises, so I believe you would need to change your code to use "await" with an async function or use .then(), one approach may be below:

fabric.util.enlivenObjects([object])
.then(enlivenedObjects =>
{ enlivenedObjects.forEach(enlivenedObj => {
fabricRef.current?.add(enlivenedObj);
}
}
);

I did not test this out, but it should conceptually work, and at least it gives you a direction to work on.
You might also need to type your objects in order for it to work with Typescript.