konva Documentation

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

14,647 stars TypeScript TypeScript 1 file · ~1,801 tokens #animation#canvas#drag-and-drop#graphics#javascript#konva#node-canvas#shape
RAW Doc

Konva






Konva is an open-source 2D canvas framework for interactive graphics. Its scene graph gives each shape its own events, drag behavior, transforms, animation, cache, and export controls.

Use Konva for design editors, whiteboards, diagrams, annotations, maps, and other visual tools. Konva is MIT licensed and does not require a license key.

This repository began as a GitHub fork of ericdrowell/KineticJS.

Framework integrations

Framework Package Documentation
React react-konva React guide
Vue vue-konva Vue guide
Svelte svelte-konva Svelte guide
Angular ng2-konva Angular guide

Quick Look

javascript
import Konva from 'konva';

const container = document.createElement('div');
document.body.appendChild(container);

const stage = new Konva.Stage({ container, width: 600, height: 400 });
const layer = new Konva.Layer();
const box = new Konva.Rect({
  x: 50, y: 50, width: 120, height: 80,
  fill: '#00a8e8', draggable: true,
});

layer.add(box);
stage.add(layer);

Browsers support

Konva works in modern mobile and desktop browsers that support ES2015.

Debugging

The Chrome inspector simply shows the canvas element. To see the Konva objects and their details, install the konva-dev extension at https://github.com/konvajs/konva-devtool.

Loading and installing Konva

Konva supports UMD loading. So you can use all possible variants to load the framework into your project:

Load Konva via classical `