Skip to main content

Getting Started with Konva — HTML5 Canvas 2D Framework

What's Konva?​

Konva is an HTML5 Canvas JavaScript framework for building interactive 2D graphics. It gives you an object model on top of the canvas — you create shapes, group them, add event listeners, drag them, animate them, and the framework handles rendering, hit detection, and state management.

Konva works on desktop and mobile, supports thousands of shapes with high-performance rendering, and has official integrations for React, Vue, Svelte, and Angular.

Quick Example​

// Create a stage (container for all layers)
const stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 400,
});

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

// Create a draggable rectangle
const rect = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 80,
  fill: 'cornflowerblue',
  shadowBlur: 5,
  cornerRadius: 4,
  draggable: true,
});
layer.add(rect);

// Add event listener
rect.on('click tap', () => {
  rect.fill(Konva.Util.getRandomColor());
});

That's it — a draggable rectangle that changes color on click. No boilerplate, no render loops.

Install Konva​

If you are using package managers:

npm install konva

Or just use a script tag:

<script src="https://unpkg.com/konva@10/konva.min.js"></script>

Or download from CDN:

Use Konva with Your Framework​

Konva has official bindings for all major frameworks:

FrameworkPackageInstall
Reactreact-konvanpm install react-konva konva
Vuevue-konvanpm install vue-konva konva
Sveltesvelte-konvanpm install svelte-konva konva
Angularng2-konvanpm install ng2-konva konva

Get started with your framework: React · Vue · Svelte · Angular

Why Konva?​

  • Shapes as objects — Create rectangles, circles, lines, text, images, paths, and more. Each shape is a JavaScript object you can manipulate independently.
  • Full event system — click, dblclick, mouseover, mouseout, touchstart, dragstart, dragend, and more. Events bubble from shapes through groups and layers, just like the DOM.
  • Drag and drop — Set draggable: true on any shape. Add drag boundaries, snapping, and drop events.
  • Resize and rotate — The built-in Transformer component adds resize and rotate handles to any shape.
  • Multi-layer rendering — Each Layer is a separate <canvas> element. Static backgrounds don't re-render when interactive shapes change.
  • Serialization — Save the entire canvas state with stage.toJSON(). Restore it with Konva.Node.create(json).
  • Filters and effects — Blur, brighten, contrast, grayscale, pixelate, and more — applied per shape.
  • High performance — Handles thousands of shapes. See performance tips and stress test demos.

What Can You Build?​

Developers use Konva for design editors, drawing apps, annotation tools, interactive maps, data visualizations, and more. Here are some examples:

See all 60+ demos →

Next Steps​

  • Konva Overview — Understand the architecture (Stage → Layer → Shape)
  • Shapes — Learn about all available shapes
  • Events — Handle clicks, hovers, touches, and more
  • Drag and Drop — Make shapes draggable
  • Animations — Animate shape properties
  • About Konva — Who uses Konva, key facts, and links