Summary  
This chapter explains how to serialize a canvas scene to JSON and later recreate it in code, as well as how to export the rendered canvas as an image via a data URL.

General domain of usage  
Web-based graphic or drawing applications.

When you want users to save their work or share their creations, you need to export and import the canvas content. In Konva.js, the two main approaches are serialization—to save the canvas state as data—and image exporting to create a visual snapshot.

Serialization involves converting the entire canvas, including all shapes, layers, and their properties, into a format that can be easily stored or transferred. The most common format for this task is **JSON**. When you serialize a Konva.js stage, you call the `stage.toJSON()` method, which produces a string representing the complete state of the canvas. This JSON can later be loaded using `Konva.Node.create(jsonString, container)`, fully restoring the canvas to its previous state, including all shapes, positions, and properties.

Exporting the canvas as an image is useful when you want to share or download a visual representation. Konva.js allows you to export the canvas as PNG or JPEG by using the `stage.toDataURL()` method. This creates a data URL that can be used as the `src` for an `<img>` tag or as a download link.

To see how these concepts work in practice, review the following example. You will find an HTML file that demonstrates how to export the current canvas as an image and how to import from a saved JSON string.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgICA8c3R5bGU+CiAgICAgICNjb250YWluZXIgewogICAgICAgIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgICAgICAgbWFyZ2luLWJvdHRvbTogMTBweDsKICAgICAgfQogICAgICAjY29udHJvbHMgewogICAgICAgIG1hcmdpbi10b3A6IDEwcHg7CiAgICAgIH0KICAgICAgdGV4dGFyZWEgewogICAgICAgIHdpZHRoOiAxMDAlOwogICAgICAgIGhlaWdodDogODBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGlkPSJjb250YWluZXIiPjwvZGl2PgogICAgPGRpdiBpZD0iY29udHJvbHMiPgogICAgICA8YnV0dG9uIGlkPSJleHBvcnQtaW1hZ2UiPkV4cG9ydCBhcyBJbWFnZTwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlkPSJleHBvcnQtanNvbiI+RXhwb3J0IGFzIEpTT048L2J1dHRvbj4KICAgICAgPGJ1dHRvbiBpZD0iaW1wb3J0LWpzb24iPkltcG9ydCBmcm9tIEpTT048L2J1dHRvbj4KICAgICAgPGJyIC8+PGJyIC8+CiAgICAgIDxpbWcgaWQ9Im91dHB1dC1pbWFnZSIgc3R5bGU9Im1heC13aWR0aDogMzAwcHg7IGRpc3BsYXk6IG5vbmUiIC8+CiAgICAgIDxiciAvPgogICAgICA8dGV4dGFyZWEKICAgICAgICBpZD0ianNvbi1vdXRwdXQiCiAgICAgICAgcGxhY2Vob2xkZXI9IkV4cG9ydGVkIEpTT04gd2lsbCBhcHBlYXIgaGVyZSIKICAgICAgPjwvdGV4dGFyZWE+CiAgICA8L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL3VucGtnLmNvbS9rb252YUA5L2tvbnZhLm1pbi5qcyI+PC9zY3JpcHQ+CiAgICA8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Ly8gQ3JlYXRlIEtvbnZhIHN0YWdlIGFuZCBsYXllcgp2YXIgc3RhZ2UgPSBuZXcgS29udmEuU3RhZ2UoewogIGNvbnRhaW5lcjogImNvbnRhaW5lciIsCiAgd2lkdGg6IDQwMCwKICBoZWlnaHQ6IDMwMAp9KTsKCnZhciBsYXllciA9IG5ldyBLb252YS5MYXllcigpOwpzdGFnZS5hZGQobGF5ZXIpOwoKLy8gQWRkIGEgc2FtcGxlIHJlY3RhbmdsZQp2YXIgcmVjdCA9IG5ldyBLb252YS5SZWN0KHsKICB4OiA1MCwKICB5OiA2MCwKICB3aWR0aDogMTAwLAogIGhlaWdodDogODAsCiAgZmlsbDogInNreWJsdWUiLAogIHN0cm9rZTogIm5hdnkiLAogIHN0cm9rZVdpZHRoOiAzLAogIGRyYWdnYWJsZTogdHJ1ZQp9KTsKbGF5ZXIuYWRkKHJlY3QpOwoKLy8gQWRkIGEgc2FtcGxlIGNpcmNsZQp2YXIgY2lyY2xlID0gbmV3IEtvbnZhLkNpcmNsZSh7CiAgeDogMjUwLAogIHk6IDE1MCwKICByYWRpdXM6IDQwLAogIGZpbGw6ICJvcmFuZ2UiLAogIHN0cm9rZTogImRhcmtyZWQiLAogIHN0cm9rZVdpZHRoOiAzLAogIGRyYWdnYWJsZTogdHJ1ZQp9KTsKbGF5ZXIuYWRkKGNpcmNsZSk7CgpsYXllci5kcmF3KCk7CgovLyBFeHBvcnQgYXMgaW1hZ2UKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImV4cG9ydC1pbWFnZSIpLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7CiAgdmFyIGRhdGFVUkwgPSBzdGFnZS50b0RhdGFVUkwoeyBwaXhlbFJhdGlvOiAyIH0pOwogIHZhciBpbWcgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgib3V0cHV0LWltYWdlIik7CiAgaW1nLnNyYyA9IGRhdGFVUkw7CiAgaW1nLnN0eWxlLmRpc3BsYXkgPSAiYmxvY2siOwp9OwoKLy8gRXhwb3J0IGFzIEpTT04KZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImV4cG9ydC1qc29uIikub25jbGljayA9IGZ1bmN0aW9uICgpIHsKICB2YXIganNvbiA9IHN0YWdlLnRvSlNPTigpOwogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJqc29uLW91dHB1dCIpLnZhbHVlID0ganNvbjsKfTsKCi8vIEltcG9ydCBmcm9tIEpTT04KZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImltcG9ydC1qc29uIikub25jbGljayA9IGZ1bmN0aW9uICgpIHsKICB2YXIganNvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJqc29uLW91dHB1dCIpLnZhbHVlOwogIGlmICghanNvbikgcmV0dXJuOwogIC8vIFJlbW92ZSBvbGQgc3RhZ2UKICBzdGFnZS5kZXN0cm95KCk7CiAgLy8gQ3JlYXRlIG5ldyBzdGFnZSBmcm9tIEpTT04KICBzdGFnZSA9IEtvbnZhLk5vZGUuY3JlYXRlKGpzb24sICJjb250YWluZXIiKTsKfTs=

Which format is commonly used to serialize and restore the state of a Konva.js canvas?

Build interactive canvas based applications using Konva JS and JavaScript. Learn to work with stages, layers, shapes, events, drawing tools, text, and images to create rich canvas experiences. Apply these skills to design whiteboard style editors, diagram tools, and other custom interactive canvas interfaces.

Learn the core ideas behind Konva.js and how its stage and layer model works. Build a foundation for drawing and manipulating shapes on the canvas with JavaScript.

Add interactivity to canvas elements by enabling dragging, resizing, and transforming shapes. Handle user events to make the canvas respond to clicks, drags, and other actions.

Create whiteboard style features using drawing tools, editable text, and images. Combine these elements to build simple diagram, annotation, or sketching interfaces.

Use grouping and layer management to organize complex scenes and prepare them for saving or export. Apply everything learned to build practical projects such as a diagram editor and a collaborative style whiteboard prototype.

Exporting and Importing Canvas Content

Exporting and Importing Canvas Content