Skip to main content

Konva

Classes​

Namespaces​

Properties​

static autoDrawEnabled​

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

Default value: true

Example:

Konva.autoDrawEnabled = true;

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.

Default value: false

Example:

Konva.hitOnDragEnabled = 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.

Default value: false

Example:

Konva.capturePointerEventsEnabled = 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.

Default value: undefined

Example:

// before any Konva code:
Konva.pixelRatio = 1;

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.

Default value: 0

Example:

Konva.dragDistance = 10;

static angleDeg​

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

Default value: true

Example:

node.rotation(45); // 45 degrees
Konva.angleDeg = false;
node.rotation(Math.PI / 2); // PI/2 radian

static showWarnings​

Show different warnings about errors or wrong API usage

Default value: true

Example:

Konva.showWarnings = false;

static dragButtons​

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

Default value: true

Example:

// enable left and right mouse buttons
Konva.dragButtons = [0, 2];

static releaseCanvasOnDestroy​

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

Default value: true

Example:

Konva.releaseCanvasOnDestroy = true;

Own Methods​

isDragging()​

returns whether or not drag and drop is currently active

isDragReady()​

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