DOCSEARCHbyAlgolia
Submit Docs

Konva.js — HTML5 Canvas 2D Framework

website·Indexed 34 days ago

https://new.konvajs.org

An open-source MIT-licensed 2D HTML5 Canvas JavaScript framework that provides an object-oriented API for canvas graphics. It features a hierarchy of Stage, Layers, Groups, and Shapes, supporting animations, event handling, and serialization. Konva provides official bindings for React (react-konva), Vue (vue-konva), Svelte (svelte-konva), and Angular (ng2-konva), and supports server-side rendering in Node.js.

Tokens
190K
Snippets
683
Records
766
Agent score
52%

What's inside Konva

  1. Overview of ng2-konva for Angular

    ng2-konva is a JavaScript library that provides declarative and reactive bindings for the Konva Framework within Angular applications. It allows developers to draw complex canvas graphics using Angular directives.

    Key concepts:

    • Components are prefixed with ko- (e.g., ko-rect, ko-circle).
    • Konva object parameters are passed via the [config] property binding.
    • Core supported shapes include: ko-rect, ko-circle, ko-ellipse, ko-line, ko-image, ko-text, ko-text-path, ko-star, ko-label, ko-path, and ko-regular-polygon.
    • For async updates (like image loading), using Angular signals is preferred over static configs.

  2. Overview of react-konva

    react-konva is a React canvas library used for drawing complex 2D graphics. It provides declarative JSX bindings to the Konva Framework, allowing developers to use React components, props, state, and hooks to manage canvas shapes (such as Rect, Circle, Line, Text, Image, and Star) and events.

    Important Constraints:

    • It works in the browser only.
    • It is not supported in React Native because React Native lacks a DOM and a <canvas> element. For React Native, use React Native Skia or run a web-based Konva editor inside a WebView.

  3. Overview of Konva.js architecture and features

    Konva.js is an open-source 2D HTML5 Canvas JavaScript framework providing an object-oriented API. It uses a hierarchy of Stage → Layer → Shape, where each Layer is rendered as a separate <canvas> element to optimize performance. It supports shapes, animations, events, drag-and-drop, and filters. It is MIT-licensed and free for commercial and personal use.

  4. Overview of svelte-konva

    svelte-konva is the official Svelte binding for Konva.js, allowing developers to draw complex canvas graphics using declarative and reactive Svelte components. Each svelte-konva component corresponds to a Konva component of the same name, and all parameters available for Konva objects can be passed as props to the corresponding svelte-konva components.

  5. Overview of Konva.js capabilities

    Konva.js is a 2D graphics framework built on top of the HTML5 Canvas API. While the native Canvas API is low-level and 'forgets' what was drawn, Konva provides a high-level object model and interaction system. Key features include:

    • Object Model: Every shape is a JavaScript object that can be moved, hidden, animated, or destroyed independently.
    • Event System: Supports events (click, hover, etc.) that bubble from shapes through groups and layers, similar to the DOM.
    • Drag and Drop: Built-in support for making shapes draggable.
    • Selection and Transformation: A Transformer tool provides resize and rotate handles for shapes.
    • Serialization: Ability to save and restore the node tree and attributes via JSON.
    • Multi-layer Architecture: Uses separate <canvas> elements for different layers to optimize performance (e.g., keeping static backgrounds from re-rendering during interactive changes).
    • Framework Bindings: Official support for React (react-konva), Vue (vue-konva), Svelte (svelte-konva), and Angular (ng2-konva).

  6. Overview of vue-konva

    vue-konva is a JavaScript library that provides declarative and reactive Vue bindings for the Konva Framework, allowing developers to draw complex canvas graphics using Vue components. All vue-konva components correspond to Konva components of the same name but are prefixed with v-. Any parameter available for a standard Konva object can be passed to the corresponding vue-konva component via the config prop.

    Core shapes available include:

    • v-rect, v-circle, v-ellipse, v-line, v-image, v-text, v-text-path, v-star, v-label, v-path, v-regular-polygon.

  7. Overview of Konva.js

    Konva is an HTML5 Canvas JavaScript framework for building interactive 2D graphics. It provides an object model on top of the canvas, allowing developers to create shapes, group them, add event listeners, and animate them. The framework handles rendering, hit detection, and state management. It supports high-performance rendering for thousands of shapes and works across desktop and mobile platforms.

  8. Overview of Konva.js

    Konva.js is an open-source MIT-licensed 2D HTML5 Canvas JavaScript framework that provides an object-oriented API for interactive canvas applications. It supports shapes, animations, events, drag-and-drop, filters, serialization, and high-quality exports. It is written in JavaScript and TypeScript with built-in type definitions.

  9. Overview of Konva.js architecture and capabilities

    Konva.js is an open-source 2D HTML5 Canvas JavaScript framework that provides an object-oriented API for canvas graphics. It follows a strict hierarchy: Stage → Layer → Group → Shape.

    • Stage: Attached to a DOM container.
    • Layer: Each layer is a separate <canvas> element.
    • Shapes: Objects drawn on layers, including Rect, Circle, Ellipse, Line, Text, Image, Path, Star, Ring, Arc, Arrow, Label, RegularPolygon, Wedge, Sprite, and TextPath.

    Key capabilities include a full event system (click, hover, touch, drag), built-in drag-and-drop, animations and tweens, image filters (blur, brighten, contrast, grayscale), canvas serialization via toJSON(), and image export via toDataURL() and toBlob().

  10. Understand automatic redraws in Konva 8+

    Since version 8, Konva automatically schedules a redraw on the next animation frame whenever a shape's attribute is changed. Calling layer.draw() or layer.batchDraw() after modifying a shape is redundant because Konva internally marks the layer as dirty and batches multiple attribute changes into a single redraw.
    // This is sufficient; Konva schedules the redraw automatically
rect.fill('red');
rect.x(120);

  11. Optimize Konva.js performance using multi-layer architecture

    To improve HTML5 Canvas performance in Konva, separate static and dynamic content into different Konva.Layer instances. Because each layer is backed by its own canvas element in the DOM, updating or animating an object in one layer does not trigger a redraw of other layers. This prevents expensive redraws of static elements (like background text or grids) when only a few objects are moving.

    Constraint: Do not create an excessive number of layers; typically, 3-5 layers are the maximum recommended for optimal performance.

    import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

// Static layer: Only redrawn when static content changes
const textLayer = new Konva.Layer();
stage.add(textLayer);

const text = new Konva.Text({
  x: 20,
  y: 20,
  text: 'Static content here',
  fontSize: 16,
  fill: 'black'
});
textLayer.add(text);

// Animated layer: Redrawn every frame during animation
const animLayer = new Konva.Layer();
stage.add(animLayer);

const circle = new Konva.Circle({
  x: 100,
  y: 100,
  radius: 30,
  fill: 'red',
});
animLayer.add(circle);

// Animation is scoped specifically to the animLayer
const anim = new Konva.Animation((frame) => {
  circle.x(100 + Math.sin(frame.time / 1000) * 50);
}, animLayer);

anim.start();

  12. Understand the difference between position and offset in Konva

    In Konva, x and y properties define the position of a Node on the canvas. When draggable is set to true, dragging a node updates these coordinates.

    • Position (x, y): Defines where the node is placed on the canvas. For 'rectangle-like' shapes (Rect, Sprite, Text, Image), this is the top-left point. For 'circle-like' shapes (Circle, Ellipse, Wedge, Star, Ring), this is the center of the shape.
    • Offset (offsetX, offsetY): Defines the origin of the shape. The origin is the point from which the shape is drawn and the point around which the shape rotates. Changing the offset does not change the node's position on the canvas, but shifts the shape relative to its x, y coordinates.