Summary  
This chapter covers how to serialize a canvas’s state into a JSON string using the toJSON method, enabling export and later reconstruction of all objects and their properties.  

General domain of usage  
Online design tools

When building interactive graphics applications, it is essential to allow users to save their work or transfer it between sessions or devices. Fabric.js provides a straightforward way to achieve this by serializing the entire state of the canvas. The primary method for this purpose is the `toJSON` function, which converts all objects and properties on the canvas into a JSON string. By exporting the canvas state as JSON, you can store user creations, send them to a server, or load them later for continued editing. This approach is vital for applications such as online design tools, collaborative editors, and any context where persistent or transferable graphics are needed.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgICA8c3R5bGU+CiAgICAgICNjYW52YXMtY29udGFpbmVyIHsKICAgICAgICBtYXJnaW4tYm90dG9tOiAxNnB4OwogICAgICB9CiAgICAgICNqc29uLW91dHB1dCB7CiAgICAgICAgd2lkdGg6IDEwMCU7CiAgICAgICAgaGVpZ2h0OiAxNTBweDsKICAgICAgICBtYXJnaW4tdG9wOiAxMnB4OwogICAgICAgIGZvbnQtZmFtaWx5OiBtb25vc3BhY2U7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBpZD0iY2FudmFzLWNvbnRhaW5lciI+CiAgICAgIDxjYW52YXMKICAgICAgICBpZD0iYyIKICAgICAgICB3aWR0aD0iNDAwIgogICAgICAgIGhlaWdodD0iMzAwIgogICAgICAgIHN0eWxlPSJib3JkZXI6IDFweCBzb2xpZCAjYWFhIgogICAgICA+PC9jYW52YXM+CiAgICA8L2Rpdj4KICAgIDxidXR0b24gaWQ9ImV4cG9ydC1qc29uIj5FeHBvcnQgdG8gSlNPTjwvYnV0dG9uPgogICAgPHRleHRhcmVhCiAgICAgIGlkPSJqc29uLW91dHB1dCIKICAgICAgcmVhZG9ubHkKICAgICAgcGxhY2Vob2xkZXI9IkpTT04gb3V0cHV0IHdpbGwgYXBwZWFyIGhlcmUiCiAgICA+PC90ZXh0YXJlYT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2NkbmpzLmNsb3VkZmxhcmUuY29tL2FqYXgvbGlicy9mYWJyaWMuanMvNS4zLjAvZmFicmljLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0PgogICAgICBjb25zdCBjYW52YXMgPSBuZXcgZmFicmljLkNhbnZhcygiYyIpOwoKICAgICAgLy8gQWRkIHNvbWUgZXhhbXBsZSBvYmplY3RzCiAgICAgIGNvbnN0IHJlY3QgPSBuZXcgZmFicmljLlJlY3QoewogICAgICAgIGxlZnQ6IDUwLAogICAgICAgIHRvcDogNDAsCiAgICAgICAgZmlsbDogImJsdWUiLAogICAgICAgIHdpZHRoOiA4MCwKICAgICAgICBoZWlnaHQ6IDYwCiAgICAgIH0pOwoKICAgICAgY29uc3QgY2lyY2xlID0gbmV3IGZhYnJpYy5DaXJjbGUoewogICAgICAgIGxlZnQ6IDIwMCwKICAgICAgICB0b3A6IDEyMCwKICAgICAgICByYWRpdXM6IDQwLAogICAgICAgIGZpbGw6ICJncmVlbiIKICAgICAgfSk7CgogICAgICBjYW52YXMuYWRkKHJlY3QsIGNpcmNsZSk7CgogICAgICAvLyBFeHBvcnQgY2FudmFzIHRvIEpTT04gYW5kIGRpc3BsYXkgaW4gdGV4dGFyZWEKICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImV4cG9ydC1qc29uIikub25jbGljayA9IGZ1bmN0aW9uICgpIHsKICAgICAgICBjb25zdCBqc29uID0gY2FudmFzLnRvSlNPTigpOwogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJqc29uLW91dHB1dCIpLnZhbHVlID0gSlNPTi5zdHJpbmdpZnkoCiAgICAgICAgICBqc29uLAogICAgICAgICAgbnVsbCwKICAgICAgICAgIDIKICAgICAgICApOwogICAgICB9OwogICAgPC9zY3JpcHQ+CiAgPC9ib2R5Pgo8L2h0bWw+

What is the main purpose of using the toJSON method in Fabric.js?

Master Fabric.js by building interactive, object-based canvas applications. Learn how to create, select, transform, group, and manipulate shapes, images, and text—just like in whiteboard apps, design tools, and annotation editors.

Gain a strong foundation in Fabric.js by understanding its rendering model and experimenting with the essential building blocks for interactive canvas graphics.

Learn how to work with images and text elements, adjust their properties, and integrate them into interactive visual compositions.

Develop skills for building complex scenes by mastering transformations, layering, and flexible object manipulation techniques.

Learn how to save, restore, and export Fabric.js canvas content, essential for real-world applications such as editors, annotation tools, and collaborative platforms.

Exporting Canvas Data to JSON

Exporting Canvas Data to JSON