Canvas Screenshot — Export HTML5 Canvas as Image with JavaScript

To take a screenshot of your canvas and export it as an image with Konva, use the toDataURL() method. It returns the data URL directly for every node type, including Stage. You can pass in a mime type such as image/jpeg and a quality value that ranges between 0 and 1. You can also capture screenshots of specific nodes, including layers, groups, and shapes.

Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.

Instructions: Drag and drop the rectangle and then click on the save button to get the composite data url and open the resulting image in a new window.

Vanilla

import Konva from 'konva';

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

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

// create draggable rectangle
const rect = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

layer.add(rect);

// add button
const button = document.createElement('button');
button.textContent = 'Save as Image';
document.body.appendChild(button);

button.addEventListener('click', () => {
  // get data URL with default settings
  const dataURL = stage.toDataURL();
  
  // open in new window
  const win = window.open();
  win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
  
  // you can also save with different settings
  const jpegURL = stage.toDataURL({
    mimeType: 'image/jpeg',
    quality: 0.8
  });
  console.log('JPEG URL:', jpegURL);
});

React

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

const App = () => {
  const stageRef = useRef(null);
  const [position, setPosition] = useState({ x: 100, y: 100 });

  const handleExport = () => {
    // get data URL with default settings
    const dataURL = stageRef.current.toDataURL();
    
    // open in new window
    const win = window.open();
    win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
    
    // you can also save with different settings
    const jpegURL = stageRef.current.toDataURL({
      mimeType: 'image/jpeg',
      quality: 0.8
    });
    console.log('JPEG URL:', jpegURL);
  };

  const handleDragEnd = (e) => {
    setPosition({
      x: e.target.x(),
      y: e.target.y()
    });
  };

  return (
    <div>
      <button onClick={handleExport} style={{ marginBottom: '10px' }}>
        Save as Image
      </button>
      <Stage width={400} height={400} ref={stageRef}>
        <Layer>
          <Rect
            x={position.x}
            y={position.y}
            width={100}
            height={100}
            fill="red"
            stroke="black"
            strokeWidth={4}
            draggable
            onDragEnd={handleDragEnd}
          />
        </Layer>
      </Stage>
    </div>
  );
};

export default App;

Vue

<template>
  <div>
    <button @click="handleExport" style="margin-bottom: 10px">
      Save as Image
    </button>
    <v-stage ref="stageRef" :config="stageSize">
      <v-layer>
        <v-rect
          :config="rectConfig"
          @dragend="handleDragEnd"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const position = ref({ x: 100, y: 100 });

const rectConfig = ref({
  x: position.value.x,
  y: position.value.y,
  width: 100,
  height: 100,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 4,
  draggable: true
});

const stageRef = ref(null);

const handleExport = () => {
  // get data URL with default settings
  const dataURL = stageRef.value.getNode().toDataURL();
  
  // open in new window
  const win = window.open();
  win.document.write(`<img src="${dataURL}" alt="Stage"/>`);
  
  // you can also save with different settings
  const jpegURL = stageRef.value.getNode().toDataURL({
    mimeType: 'image/jpeg',
    quality: 0.8
  });
  console.log('JPEG URL:', jpegURL);
};

const handleDragEnd = (e) => {
  const newPos = e.target.position();
  position.value = newPos;
  rectConfig.value.x = newPos.x;
  rectConfig.value.y = newPos.y;
};
</script>