# Konva — 2D Canvas Framework for Desktop and Mobile Apps

> A high-performance 2D drawing library for the HTML5 Canvas that provides a scene graph, event handling, drag-and-drop, and layering for building rich interactive graphics.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# Konva — 2D Canvas Framework for Desktop and Mobile Apps

## Quick Use
```bash
npm install konva
```
```javascript
import Konva from 'konva';
const stage = new Konva.Stage({ container: 'app', width: 500, height: 400 });
const layer = new Konva.Layer();
layer.add(new Konva.Circle({ x: 100, y: 100, radius: 50, fill: 'green' }));
stage.add(layer);
```

## Introduction
Konva is a 2D canvas library that extends the native HTML5 Canvas with a structured scene graph, event system, and rendering layers. It enables building interactive drawing applications, image editors, and data visualizations with object-level manipulation.

## What Konva Does
- Manages a scene graph of shapes (rect, circle, line, text, image, path) across multiple layers
- Provides per-shape event handling including click, drag, hover, and touch gestures
- Supports built-in drag-and-drop with configurable bounds and snap
- Offers node nesting through groups with inherited transforms and opacity
- Exports canvas content to PNG, JPEG, or data URL for saving and sharing

## Architecture Overview
Konva organizes rendering into a Stage that contains Layers, each backed by its own Canvas element. This multi-canvas approach means updating one layer does not require redrawing others. Each Layer holds a tree of Groups and Shapes. Hit detection uses a separate hidden canvas with unique color-per-shape for pixel-accurate event targeting without geometric math.

## Self-Hosting & Configuration
- Install via npm, Yarn, or load from a CDN script tag
- Create a Stage bound to a container div with width and height
- Add Layers to isolate rendering concerns (background, interactive, overlay)
- Use react-konva or vue-konva for framework-specific declarative bindings
- Configure pixel ratio, listening state, and hit-graph optimization per layer

## Key Features
- Multi-layer rendering isolates redraws for complex scenes with background and foreground
- Color-based hit detection provides pixel-perfect event targeting on irregular shapes
- Built-in tweening engine for animating any node property with easing functions
- Filters (blur, brightness, contrast, pixelate) applied per-node on cached bitmaps
- High-DPI support with automatic pixel-ratio scaling for retina displays

## Comparison with Similar Tools
- **Fabric.js** — similar scope but uses single-canvas rendering; Konva's multi-layer approach improves perf
- **Paper.js** — vector-first with path booleans; Konva focuses on bitmap canvas with layers
- **PixiJS** — WebGL-first 2D renderer for games; Konva is Canvas2D with richer interaction model
- **HTML5 Canvas API** — low-level; no scene graph, events, or object persistence
- **SVG DOM** — retained vector graphics; performance degrades with large node counts

## FAQ
**Q: Can Konva render on the server?**
A: Yes. Use konva with canvas (node-canvas) for server-side image generation.

**Q: How does react-konva work?**
A: It provides React components (Stage, Layer, Rect, etc.) that map to Konva nodes, managing the scene graph via React reconciler.

**Q: Is Konva suitable for real-time games?**
A: For casual games and interactive apps, yes. For high-FPS action games, consider a WebGL renderer like PixiJS.

**Q: Can I handle thousands of shapes?**
A: Yes. Use layer isolation, caching, and listening:false on static shapes to maintain performance.

## Sources
- https://github.com/konvajs/konva
- https://konvajs.org/docs/

---
Source: https://tokrepo.com/en/workflows/konva-2d-canvas-framework-desktop-mobile-apps-99da8a39
Author: Script Depot