konvajs/konva

Konva is a JavaScript framework for building interactive graphics in the browser. It works on top of the HTML5 Canvas element, which is the part of a webpage that lets you draw shapes, images, and animations with code. Rather than working with Canvas directly, which requires low-level drawing commands and has no built-in concept of interactive objects, Konva lets you create shapes as independent objects that can be dragged, clicked, animated, filtered, and layered on top of each other. The practical result is that you can build things like diagram editors, image cropping tools, design canvases, drawing applications, and other interactive graphics tools without writing complex low-level code. Each shape on screen can have its own event listeners for clicks, drags, and hover states. Shapes can be grouped, cached for performance, and organized into layers so that only the parts of the scene that need to change are redrawn. Konva works in all modern desktop and mobile browsers and also runs in Node.js, which is JavaScript outside the browser, useful for server-side image generation. On the server, it requires an additional canvas rendering package to handle the actual drawing. For browser use, it can be loaded from a content delivery network with a single script tag, installed through the npm package manager, or imported as a module in modern JavaScript projects. TypeScript, a typed version of JavaScript, is also supported. The library is tested extensively, with hundreds of tests and over a thousand assertions covering its behavior. New features and bug fixes are expected to come with accompanying tests. There is a developer browser extension for inspecting Konva objects during debugging, since the browser's built-in inspector only shows the raw canvas element rather than the shape objects Konva manages on top of it.