Namespace: Konva

Konva

Source:
konva.js

Classes

Animation
Arc
Arrow
Canvas
Circle
Container
Context
Ellipse
FastLayer
Group
Image
Label
Layer
Line
Node
Path
Rect
RegularPolygon
Ring
Shape
Sprite
Stage
Star
Tag
Text
TextPath
Transform
Transformer
Tween
Wedge

Namespaces

Easings
Filters
Util

Members

<static> angleDeg

Use degree values for angle properties. You may set this property to false if you want to use radian values.

Properties:
Name Type Description
angleDeg
Default Value:
  • true
Source:
konva.js
Example
node.rotation(45); // 45 degrees
Konva.angleDeg = false;
node.rotation(Math.PI / 2); // PI/2 radian

<static> autoDrawEnabled

Should Konva automatically update canvas on any changes. Default is true.

Properties:
Name Type Description
autoDrawEnabled
Default Value:
  • true
Source:
konva.js
Example
Konva.autoDrawEnabled = true;

<static> capturePointerEventsEnabled

Should we capture touch events and bind them to the touchstart target? That is how it works on DOM elements.
The case: we touchstart on div1, then touchmove out of that element into another element div2.
DOM will continue trigger touchmove events on div1 (not div2). Because events are "captured" into initial target.
By default Konva do not do that and will trigger touchmove on another element, while pointer is moving.

Properties:
Name Type Description
capturePointerEventsEnabled
Default Value:
  • false
Source:
konva.js
Example
Konva.capturePointerEventsEnabled = true;

<static> dragButtons

Configure what mouse buttons can be used for drag and drop.
Default value is [0] - only left mouse button.

Properties:
Name Type Description
dragButtons
Default Value:
  • true
Source:
konva.js
Example
// enable left and right mouse buttons
Konva.dragButtons = [0, 2];

<static> dragDistance

Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
only then start dragging. Default is 3px.

Properties:
Name Type Description
dragDistance
Default Value:
  • 0
Source:
konva.js
Example
Konva.dragDistance = 10;

<static> hitOnDragEnabled

Should we enable hit detection while dragging? For performance reasons, by default it is false.
But on some rare cases you want to see hit graph and check intersections. Just set it to true.

Properties:
Name Type Description
hitOnDragEnabled
Default Value:
  • false
Source:
konva.js
Example
Konva.hitOnDragEnabled = true;

<static> pixelRatio

Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
But you may override such property, if you want to use your value. Set this value before any components initializations.

Properties:
Name Type Description
pixelRatio
Default Value:
  • undefined
Source:
konva.js
Example
// before any Konva code:
Konva.pixelRatio = 1;

<static> releaseCanvasOnDestroy

Should Konva release canvas elements on destroy. Default is true.
Useful to avoid memory leak issues in Safari on macOS/iOS.

Properties:
Name Type Description
releaseCanvasOnDestroy
Default Value:
  • true
Source:
konva.js
Example
Konva.releaseCanvasOnDestroy = true;

<static> showWarnings

Show different warnings about errors or wrong API usage

Properties:
Name Type Description
showWarnings
Default Value:
  • true
Source:
konva.js
Example
Konva.showWarnings = false;

Methods

<static> isDragging()

returns whether or not drag and drop is currently active

Source:
konva.js

<static> isDragReady()

returns whether or not a drag and drop operation is ready, but may
not necessarily have started

Source:
konva.js