Konva HTML5 Canvas Framework

To use Konva in Node.js, you must manually install a rendering backend like canvas or skia-canvas. When using a backend in Node, you do not need to provide a container attribute in the Stage configuration.

# node-canvas backend
npm install konva canvas

# skia-canvas backend
npm install konva skia-canvas

import Konva from 'konva';
import 'konva/canvas-backend'; // or import 'konva/skia-backend';

const stage = new Konva.Stage({
  width: 500,
  height: 500,
});

When using Konva with TypeScript, ensure your tsconfig.json includes the dom library to provide necessary DOM definitions.

{
  "compilerOptions": {
    "lib": [
        "es6",
        "dom"
    ]
  }
}

To reduce bundle size, you can import only the Core module. This provides Stage, Layer, FastLayer, Group, Shape, and basic utilities (including drag&drop and animations), but excludes shapes and filters. You can then selectively import only the specific shapes or filters you need, which will automatically inject them into the Konva object.

import Konva from 'konva/lib/Core';

// Import specific shapes to inject them into Konva
import { Rect } from 'konva/lib/shapes/Rect';

// Or use them directly
var rect1 = new Rect();
// or:
var shape = new Konva.Rect();

// Import filters as needed
import { Blur } from 'konva/lib/filters/Blur';

To use Konva in a modern web development environment (e.g., with Webpack or Parcel), install it via npm and import it using ES6 syntax.

npm install konva --save

import Konva from 'konva';

A Layer is a container tied to its own canvas element. It is used to hold Group or Shape objects. Layers are typically added to a Stage. Each layer manages its own scene canvas and a hidden hit canvas used for event detection.

To use a layer, create a new instance and add it to your stage. You can then add shapes or groups directly to the layer.

var layer = new Konva.Layer();
stage.add(layer);
// now you can add shapes, groups into the layer

When creating a Layer, you can pass a LayerConfig object to customize its behavior:

• clearBeforeDraw (Boolean): Determines if the canvas is cleared before each layer draw. Defaults to true. Set to false if you want to preserve previous drawings.
• hitGraphEnabled (Boolean): DEPRECATED. Use layer.listening(boolean) instead. Disabling the hit graph increases draw performance but disables mouse/touch event detection.
• imageSmoothingEnabled (Boolean): Controls the imageSmoothingEnabled flag of the canvas context.

export interface LayerConfig extends ContainerConfig {
  clearBeforeDraw?: boolean;
  hitGraphEnabled?: boolean;
  imageSmoothingEnabled?: boolean;
}

The WedgeConfig object accepts the following properties:

The RegularPolygon shape accepts the following configuration properties via its constructor or getter/setter methods:

• sides (number): The number of sides of the polygon. Defaults to 0.
• radius (number): The radius of the polygon. Defaults to 0. Note that changing the radius affects the size of the shape.
• cornerRadius (number | number[]): The radius of the corners. If an array is provided, it allows for different corner radii (e.g., for a pentagon, an array of 5 numbers). Defaults to 0.

The Konva.Filters.RGBA filter allows you to manipulate the color components (red, green, blue) and the alpha (transparency) of a node. To use it, you must first call .cache() on the node, then apply the filter using .filters([Konva.Filters.RGBA]), and finally set the desired color values using the specific getter/setter methods.

node.cache();
node.filters([Konva.Filters.RGBA]);
node.red(120);
node.green(200);
node.blue(50);
node.alpha(0.3);