DOCSEARCHbyAlgolia
Submit Docs

Konva.js — HTML5 Canvas 2D Framework

website·Indexed 34 days ago

https://konvajs.org

An open-source MIT-licensed 2D HTML5 Canvas JavaScript framework providing an object-oriented API for canvas graphics. It features a hierarchical architecture of Stages, 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 using canvas or skia-canvas backends.

Tokens
191.6K
Snippets
689
Records
775
Agent score
70%

What's inside Konva

  1. 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 uses a hierarchical structure: Stage → Layer → Group → Shape.

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

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

  2. 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.

  3. 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.

  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 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.

  6. 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.

  7. 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).

  8. 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.

  9. 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.

  10. Understand Konva.js architecture and node hierarchy

    Konva organizes canvas elements in a virtual node hierarchy similar to the DOM. The structure is: Stage → Layer → Group/Shape.

    • Stage: The root container.
    • Layer: Contains two <canvas> renderers: a scene renderer (visible) and a hit graph renderer (hidden, used for high-performance event detection).
    • Group: A container for shapes or other groups.
    • Shape: The basic drawing unit (e.g., Rect, Circle, Custom Shape).

  11. 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);