Save HTML5 Canvas Stage as JSON String

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.

Konva Save Stage Demoview raw
<!DOCTYPE html>
<script src=""></script>
<meta charset="utf-8">
<title>Konva Save Stage Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
<div id="container"></div>
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
// add the layer to the stage
// save stage as a json string
var json = stage.toJSON();