Save HTML5 Canvas Stage as JSON String

How to export canvas to JSON?

To save the stage as a JSON string with Konva, we can use the toJSON()
method which serializes the Konva Node tree into text which can be saved
in web storage or in an offline database. We can also serialize other nodes,
including layers, groups, and shapes.

toJSON() method can’t save filters, images and event listeners. So it works for very small apps. For more complex cases read Best Practices

Konva Save Stage Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Save Stage Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();

      var hexagon = new Konva.RegularPolygon({
        x: width / 2,
        y: height / 2,
        sides: 6,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });

      // add the shape to the layer
      layer.add(hexagon);

      // add the layer to the stage
      stage.add(layer);

      // save stage as a json string
      var json = stage.toJSON();

      console.log(json);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.