Konva

Konva.js is an HTML5 Canvas framework that extends the native 2D canvas context with a scene-graph-based API, adding interactivity, event handling, drag-and-drop, layering, caching, and filters on top of raw canvas drawing. It began as a fork of KineticJS and has grown into one of the most widely used canvas libraries in the JavaScript ecosystem, used for design tools, diagram editors, and image manipulation UIs.

Unlike bare canvas drawing, Konva models shapes, groups, and layers as nodes with retained state, so applications can move, scale, rotate, and re-render individual objects independently — even with thousands of shapes on stage — while maintaining smooth animation performance. It runs in browsers via UMD/ESM builds and also in Node.js environments through the canvas or skia-canvas backends, and has official bindings for React (react-konva), Vue, and Svelte.

What You Get

• A full set of built-in shapes (Rect, Circle, Arc, Path, Text, Image, Star, Sprite, Transformer, and more)
• Node-based event handling (mouse/touch/pointer) attached directly to shapes and groups
• Built-in drag-and-drop, animation loop, tweening, and caching APIs
• Layer-based compositing for performance with large numbers of shapes
• A minimal-bundle Core import path plus opt-in shape/filter imports for smaller builds
• Node.js rendering support via canvas or skia-canvas backends

Common Use Cases

• Building design and diagram editors (e.g. Polotno-style canvas editors)
• Interactive image cropping, annotation, and photo-editing tools
• Whiteboard and free-drawing applications
• Data visualization and dashboard widgets that need custom, high-performance canvas rendering
• Server-side canvas image generation via the Node.js backends

Under The Hood

Architecture - Konva models the canvas as a retained scene graph rooted at a Stage, which contains one or more Layer nodes, each backed by its own <canvas> element (Canvas.ts/Context.ts wrap the native 2D context). Container.ts and Node.ts implement the shared tree behavior (add/remove children, transforms, caching), while Shape.ts and the concrete shapes under src/shapes/ (Rect, Circle, Path, Text, Transformer, etc.) implement per-type _sceneFunc drawing logic. Events (Global.ts, PointerEvents.ts) are dispatched by walking the node tree for hit-testing rather than relying on native DOM events, which is what lets thousands of shapes each have independent listeners. Animation.ts and Tween.ts provide a shared requestAnimationFrame-driven update loop so multiple animations stay in sync. Tech Stack - The library is authored entirely in TypeScript (97% of the codebase) and compiled with tsc plus a Rollup bundle step (rollup.config.mjs) into UMD/ESM builds; gulpfile.mjs drives packaging and API-doc generation. It has zero runtime dependencies for browser usage, and optionally depends on canvas or skia-canvas for the Node.js rendering backends (canvas-backend.ts/skia-backend.ts). Code Quality - The test/ directory contains an extensive Mocha-based suite (browser via mocha-headless-chrome and Node via tsx), described in the README as covering the library with hundreds of tests and over a thousand assertions, and the project enforces TDD for new features and fixes. Code is organized by concern (one file per shape/filter), uses TypeScript types throughout, and Prettier formatting is enforced via fmt:check. API Design - The API favors a declarative, config-object constructor pattern (new Konva.Rect({...})) consistent across every shape, plus chainable getter/setter methods generated via a shared Factory.ts helper, which keeps the surface predictable once a developer learns the pattern; a konva/lib/Core minimal entry point plus opt-in shape/filter imports let consumers trade convenience for bundle size.