HTML5 Canvas Stage Serialization Tutorial

To serialize a stage with Konva, we can use the toJSON() method. The toJSON() method will return a JSON string that contains all of the node's attributes. Note that event handlers and images are not serializable.

Vanilla

import Konva from 'konva';

// Create wrapper with relative positioning
const stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 400
});

const layer = new Konva.Layer();
stage.add(layer);

const circle = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 3
});

layer.add(circle);

// Add button on top of stage
const button = document.createElement('button');
button.textContent = 'Serialize Stage';
button.style.position = 'absolute';
button.style.top = '10px';
button.style.left = '10px';
document.body.appendChild(button);

button.addEventListener('click', () => {
  const json = stage.toJSON();
  console.log(json);
  alert('Stage serialized! Check the console for the JSON string.');
});

Open Sandbox

React

Note: While directly serializing the stage works in React, it's generally considered an anti-pattern. In React applications, you should manage your application state separately and serialize that state instead of the stage.

import { Stage, Layer, Circle } from 'react-konva';
import { useRef, useState } from 'react';

const App = () => {
  const stageRef = useRef(null);
  const [circle, setCircle] = useState({
    x: 100,
    y: 100,
    radius: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 3
  });

  const handleSerialize = () => {
    // In a real app, prefer saving app state, not stage JSON
    const json = JSON.stringify({ shapes: [circle] });
    console.log('Serialized state:', json);
    alert('State serialized! Check the console for the JSON string.');
  };

  return (
    <div style={{ position: 'relative' }}>
      <button 
        onClick={handleSerialize}
        style={{ 
          position: 'absolute', 
          top: '10px', 
          left: '10px', 
          zIndex: 1 
        }}
      >
        Serialize
      </button>
      
      <Stage width={400} height={400} ref={stageRef}>
        <Layer>
          <Circle
            {...circle}
            draggable
            onDragEnd={(e) => {
              setCircle({
                ...circle,
                x: e.target.x(),
                y: e.target.y()
              });
            }}
          />
        </Layer>
      </Stage>
    </div>
  );
};

export default App;

Open Sandbox

Vue

Note: While directly serializing the stage works in Vue, it's generally considered an anti-pattern. In Vue applications, you should manage your application state with reactive data and serialize that state instead of the stage.

<template>
  <div style="position: relative">
    <button 
      @click="handleSerialize"
      style="position: absolute; top: 10px; left: 10px; z-index: 1"
    >
      Serialize
    </button>
    
    <v-stage :config="stageSize">
      <v-layer>
        <v-circle 
          :config="circle" 
          draggable
          @dragend="handleDragEnd"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const stageSize = {
  width: 400,
  height: 400
};

const circle = ref({
  x: 100,
  y: 100,
  radius: 50,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 3
});

const handleSerialize = () => {
  // In a real app, prefer saving app state, not stage JSON
  const json = JSON.stringify({ shapes: [circle.value] });
  console.log('Serialized state:', json);
  alert('State serialized! Check the console for the JSON string.');
};

const handleDragEnd = (e) => {
  const node = e.target;
  circle.value = {
    ...circle.value,
    x: node.x(),
    y: node.y()
  };
};
</script>

Open Sandbox