When working with Fabric.js, you often need to save and later restore the state of your canvas. This is especially important for real-world applications where users want to continue their work, share designs, or simply reload previous sessions. Fabric.js provides a straightforward way to import canvas data from a JSON string using the loadFromJSON method. This method allows you to take a JSON representation of your canvas—previously exported using Fabric.js's serialization capabilities—and restore all objects, their positions, styles, and properties exactly as they were.

To use loadFromJSON, you first need a reference to your Fabric.js canvas and a valid JSON string that represents the saved canvas state. Calling canvas.loadFromJSON(jsonString, callback) will parse the JSON and rebuild the canvas objects. The optional callback function is executed when the process is complete, allowing you to perform additional actions, such as rendering the canvas or updating the UI.

It's important to note that loadFromJSON replaces the current canvas content with the objects defined in the JSON. This makes it ideal for restoring a previously saved design or importing designs shared by others. You can trigger this import process in response to user actions, such as clicking an Import button and pasting or uploading JSON data.

The following example demonstrates how to set up a simple HTML page with a Fabric.js canvas, an import button, and a text area for JSON input. When you click the button, the canvas is restored to the state described by the provided JSON data.