Class: Shape

Konva. Shape

Shape constructor. Shapes are primitive objects such as rectangles,
circles, text, lines, etc.

new Shape(config)

Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
fill String <optional>

fill color
fillPatternImage Image <optional>

fill pattern image
fillPatternX Number <optional>
fillPatternY Number <optional>
fillPatternOffset Object <optional>

object with x and y component
fillPatternOffsetX Number <optional>
fillPatternOffsetY Number <optional>
fillPatternScale Object <optional>

object with x and y component
fillPatternScaleX Number <optional>
fillPatternScaleY Number <optional>
fillPatternRotation Number <optional>
fillPatternRepeat String <optional>

can be "repeat", "repeat-x", "repeat-y", or "no-repeat". The default is "no-repeat"
fillLinearGradientStartPoint Object <optional>

object with x and y component
fillLinearGradientStartPointX Number <optional>
fillLinearGradientStartPointY Number <optional>
fillLinearGradientEndPoint Object <optional>

object with x and y component
fillLinearGradientEndPointX Number <optional>
fillLinearGradientEndPointY Number <optional>
fillLinearGradientColorStops Array <optional>

array of color stops
fillRadialGradientStartPoint Object <optional>

object with x and y component
fillRadialGradientStartPointX Number <optional>
fillRadialGradientStartPointY Number <optional>
fillRadialGradientEndPoint Object <optional>

object with x and y component
fillRadialGradientEndPointX Number <optional>
fillRadialGradientEndPointY Number <optional>
fillRadialGradientStartRadius Number <optional>
fillRadialGradientEndRadius Number <optional>
fillRadialGradientColorStops Array <optional>

array of color stops
fillEnabled Boolean <optional>

flag which enables or disables the fill. The default value is true
fillPriority String <optional>

can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration
stroke String <optional>

stroke color
strokeWidth Number <optional>

stroke width
fillAfterStrokeEnabled Boolean <optional>

Should we draw fill AFTER stroke? Default is false.
hitStrokeWidth Number <optional>

size of the stroke on hit canvas. The default is "auto" - equals to strokeWidth
strokeHitEnabled Boolean <optional>

flag which enables or disables stroke hit region. The default is true
perfectDrawEnabled Boolean <optional>

flag which enables or disables using buffer canvas. The default is true
shadowForStrokeEnabled Boolean <optional>

flag which enables or disables shadow for stroke. The default is true
strokeScaleEnabled Boolean <optional>

flag which enables or disables stroke scale. The default is true
strokeEnabled Boolean <optional>

flag which enables or disables the stroke. The default value is true
lineJoin String <optional>

can be miter, round, or bevel. The default
is miter
lineCap String <optional>

can be butt, round, or square. The default
is butt
shadowColor String <optional>
shadowBlur Number <optional>
shadowOffset Object <optional>

object with x and y component
shadowOffsetX Number <optional>
shadowOffsetY Number <optional>
shadowOpacity Number <optional>

shadow opacity. Can be any real number
between 0 and 1
shadowEnabled Boolean <optional>

flag which enables or disables the shadow. The default value is true
dash Array <optional>
dashEnabled Boolean <optional>

flag which enables or disables the dashArray. The default value is true
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
visible Boolean <optional>
listening Boolean <optional>

whether or not the node is listening for events
id String <optional>

unique id
name String <optional>

non-unique name
opacity Number <optional>

determines node opacity. Can be any number between 0 and 1
scale Object <optional>

set scale
scaleX Number <optional>

set scale x
scaleY Number <optional>

set scale y
rotation Number <optional>

rotation in degrees
offset Object <optional>

offset from center point and rotation point
offsetX Number <optional>

set offset x
offsetY Number <optional>

set offset y
draggable Boolean <optional>

makes the node draggable. When stages are draggable, you can drag and drop
the entire stage by dragging any portion of the stage
dragDistance Number <optional>
dragBoundFunc function <optional>
Source:
konva.js
Example
var customShape = new Konva.Shape({
  x: 5,
  y: 10,
  fill: 'red',
  // a Konva.Canvas renderer is passed into the sceneFunc function
  sceneFunc (context, shape) {
    context.beginPath();
    context.moveTo(200, 50);
    context.lineTo(420, 80);
    context.quadraticCurveTo(300, 100, 260, 170);
    context.closePath();
    // Konva specific method
    context.fillStrokeShape(shape);
  }
});

Extends

Methods

absolutePosition(pos)

get/set node absolute position

Parameters:
Name Type Description
pos Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get position
var position = node.absolutePosition();

// set position
node.absolutePosition({
  x: 5,
  y: 10
});

addName(name)

add name to node

Parameters:
Name Type Description
name String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
node.name('red');
node.addName('selected');
node.name(); // return 'red selected'

alpha(alpha)

get/set filter alpha value. Use with Konva.Filters.RGBA filter.

Parameters:
Name Type Description
alpha Float

value between 0 and 1
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Float

blue(blue)

get/set filter blue value. Use with Konva.Filters.RGB filter.

Parameters:
Name Type Description
blue Integer

value between 0 and 255
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

blurRadius(radius)

get/set blur radius. Use with Konva.Filters.Blur filter

Parameters:
Name Type Description
radius Integer
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

brightness(brightness)

get/set filter brightness. The brightness is a number between -1 and 1.  Positive values
brighten the pixels and negative values darken them. Use with Konva.Filters.Brighten filter.

Parameters:
Name Type Description
brightness Number

value between -1 and 1
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

cache( [config])

cache node to improve drawing performance, apply filters, or create more accurate
hit regions. For all basic shapes size of cache canvas will be automatically detected.
If you need to cache your custom Konva.Shape instance you have to pass shape's bounding box
properties. Look at https://konvajs.org/docs/performance/Shape_Caching.html for more information.

Parameters:
Name Type Argument Description
config Object <optional>
Properties
Name Type Argument Description
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
offset Number <optional>

increase canvas size by offset pixel in all directions.
drawBorder Boolean <optional>

when set to true, a red border will be drawn around the cached
region for debugging purposes
pixelRatio Number <optional>

change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
imageSmoothingEnabled Boolean <optional>

control imageSmoothingEnabled property of created canvas for cache
hitCanvasPixelRatio Number <optional>

change quality (or pixel ratio) of cached hit canvas.
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// cache a shape with the x,y position of the bounding box at the center and
// the width and height of the bounding box equal to the width and height of
// the shape obtained from shape.width() and shape.height()
image.cache();

// cache a node and define the bounding box position and size
node.cache({
  x: -30,
  y: -30,
  width: 100,
  height: 200
});

// cache a node and draw a red border around the bounding box
// for debugging purposes
node.cache({
  x: -30,
  y: -30,
  width: 100,
  height: 200,
  offset : 10,
  drawBorder: true
});

clearCache()

clear cached canvas

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
node.clearCache();

clone(obj)

clone node. Returns a new Node instance with identical attributes. You can also override
the node properties with an object literal, enabling you to use an existing node as a template
for another node

Parameters:
Name Type Description
obj Object

override attrs
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// simple clone
var clone = node.clone();

// clone a node and override the x position
var clone = rect.clone({
  x: 5
});

contrast(contrast)

get/set filter contrast. The contrast is a number between -100 and 100.
Use with Konva.Filters.Contrast filter.

Parameters:
Name Type Description
contrast Number

value between -100 and 100
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

dash(dash)

get/set dash array for stroke.

Parameters:
Name Type Description
dash Array
Source:
konva.js
Returns:
Type
Array
Example
// apply dashed stroke that is 10px long and 5 pixels apart
 line.dash([10, 5]);
 // apply dashed stroke that is made up of alternating dashed
 // lines that are 10px long and 20px apart, and dots that have
 // a radius of 5px and are 20px apart
 line.dash([10, 20, 0.001, 20]);

dash(dash)

get/set dash offset for stroke.

Parameters:
Name Type Description
dash Number

offset
Source:
konva.js
Returns:
Type
Number
Example
// apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px
 line.dash([10, 5]);
 line.dashOffset(5);

dashEnabled(enabled)

get/set dash enabled flag

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get dash enabled flag
var dashEnabled = shape.dashEnabled();

// disable dash
shape.dashEnabled(false);

// enable dash
shape.dashEnabled(true);

destroy()

remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
If the node is a container (Group, Stage or Layer) it will destroy all children too.

Inherited From:
Overrides:
Source:
konva.js
Example
node.destroy();

dragBoundFunc(dragBoundFunc)

get/set drag bound function. This is used to override the default
drag and drop position.

Parameters:
Name Type Description
dragBoundFunc function
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
function
Example
// get drag bound function
var dragBoundFunc = node.dragBoundFunc();

// create vertical drag and drop
node.dragBoundFunc(function(pos){
  // important pos - is absolute position of the node
  // you should return absolute position too
  return {
    x: this.absolutePosition().x,
    y: pos.y
  };
});

dragDistance(distance)

get/set drag distance

Parameters:
Name Type Description
distance Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get drag distance
var dragDistance = node.dragDistance();

// set distance
// node starts dragging only if pointer moved more then 3 pixels
node.dragDistance(3);
// or set globally
Konva.dragDistance = 3;

draggable(draggable)

get/set draggable flag

Parameters:
Name Type Description
draggable Boolean
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean
Example
// get draggable flag
var draggable = node.draggable();

// enable drag and drop
node.draggable(true);

// disable drag and drop
node.draggable(false);

draw()

draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node

drawHitFromCache(alphaThreshold)

draw hit graph using the cached scene canvas

Parameters:
Name Type Description
alphaThreshold Integer

alpha channel threshold that determines whether or not
a pixel should be drawn onto the hit graph. Must be a value between 0 and 255.
The default is 0
Source:
konva.js
Returns:
Type
Konva.Shape
Example
shape.cache();
shape.drawHitFromCache();

embossBlend(embossBlend)

get/set emboss blend. Use with Konva.Filters.Emboss filter.

Parameters:
Name Type Description
embossBlend Boolean
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

embossDirection(embossDirection)

get/set emboss direction. Use with Konva.Filters.Emboss filter.

Parameters:
Name Type Description
embossDirection String

can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
The default is top-left
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String

embossStrength(level)

get/set emboss strength. Use with Konva.Filters.Emboss filter.

Parameters:
Name Type Description
level Number

between 0 and 1. Default is 0.5
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

embossWhiteLevel(embossWhiteLevel)

get/set emboss white level. Use with Konva.Filters.Emboss filter.

Parameters:
Name Type Description
embossWhiteLevel Number

between 0 and 1. Default is 0.5
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

enhance(amount)

get/set enhance. Use with Konva.Filters.Enhance filter. -1 to 1 values

Parameters:
Name Type Description
amount Float
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Float

fill(color)

get/set fill color

Parameters:
Name Type Description
color String
Source:
konva.js
Returns:
Type
String
Example
// get fill color
var fill = shape.fill();

// set fill color with color string
shape.fill('green');

// set fill color with hex
shape.fill('#00ff00');

// set fill color with rgb
shape.fill('rgb(0,255,0)');

// set fill color with rgba and make it 50% opaque
shape.fill('rgba(0,255,0,0.5');

// shape without fill
shape.fill(null);

fillAfterStrokeEnabled(fillAfterStrokeEnabled)

get/set fillAfterStrokeEnabled property. By default Konva is drawing filling first, then stroke on top of the fill.
In rare situations you may want a different behavior. When you have a stroke first then fill on top of it.
Especially useful for Text objects.
Default is false.

Parameters:
Name Type Description
fillAfterStrokeEnabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get stroke width
var fillAfterStrokeEnabled = shape.fillAfterStrokeEnabled();

// set stroke width
shape.fillAfterStrokeEnabled(true);

fillEnabled(enabled)

get/set fill enabled flag

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get fill enabled flag
var fillEnabled = shape.fillEnabled();

// disable fill
shape.fillEnabled(false);

// enable fill
shape.fillEnabled(true);

fillLinearGradientColorStops(colorStops)

get/set fill linear gradient color stops

Parameters:
Name Type Description
colorStops Array
Source:
konva.js
Returns:

colorStops

Type
Array
Example
// get fill linear gradient color stops
var colorStops = shape.fillLinearGradientColorStops();

// create a linear gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');

fillLinearGradientEndPoint(endPoint)

get/set fill linear gradient end point

Parameters:
Name Type Description
endPoint Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get fill linear gradient end point
var endPoint = shape.fillLinearGradientEndPoint();

// set fill linear gradient end point
shape.fillLinearGradientEndPoint({
  x: 20,
  y: 10
});

fillLinearGradientEndPointX(x)

get/set fill linear gradient end point x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill linear gradient end point x
var endPointX = shape.fillLinearGradientEndPointX();

// set fill linear gradient end point x
shape.fillLinearGradientEndPointX(20);

fillLinearGradientEndPointY(y)

get/set fill linear gradient end point y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill linear gradient end point y
var endPointY = shape.fillLinearGradientEndPointY();

// set fill linear gradient end point y
shape.fillLinearGradientEndPointY(20);

fillLinearGradientStartPoint(startPoint)

get/set fill linear gradient start point

Parameters:
Name Type Description
startPoint Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get fill linear gradient start point
var startPoint = shape.fillLinearGradientStartPoint();

// set fill linear gradient start point
shape.fillLinearGradientStartPoint({
  x: 20,
  y: 10
});

fillLinearGradientStartPointX(x)

get/set fill linear gradient start point x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill linear gradient start point x
var startPointX = shape.fillLinearGradientStartPointX();

// set fill linear gradient start point x
shape.fillLinearGradientStartPointX(20);

fillLinearGradientStartPointY(y)

get/set fill linear gradient start point y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill linear gradient start point y
var startPointY = shape.fillLinearGradientStartPointY();

// set fill linear gradient start point y
shape.fillLinearGradientStartPointY(20);

fillPatternImage(image)

get/set fill pattern image

Parameters:
Name Type Description
image Image

object
Source:
konva.js
Returns:
Type
Image
Example
// get fill pattern image
var fillPatternImage = shape.fillPatternImage();

// set fill pattern image
var imageObj = new Image();
imageObj.onload = function() {
  shape.fillPatternImage(imageObj);
};
imageObj.src = 'path/to/image/jpg';

fillPatternOffset(offset)

get/set fill pattern offset

Parameters:
Name Type Description
offset Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get fill pattern offset
var patternOffset = shape.fillPatternOffset();

// set fill pattern offset
shape.fillPatternOffset({
  x: 20,
  y: 10
});

fillPatternOffsetX(x)

get/set fill pattern offset x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill pattern offset x
var patternOffsetX = shape.fillPatternOffsetX();

// set fill pattern offset x
shape.fillPatternOffsetX(20);

fillPatternOffsetY(y)

get/set fill pattern offset y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill pattern offset y
var patternOffsetY = shape.fillPatternOffsetY();

// set fill pattern offset y
shape.fillPatternOffsetY(10);

fillPatternRepeat(repeat)

get/set fill pattern repeat. Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'repeat'

Parameters:
Name Type Description
repeat String
Source:
konva.js
Returns:
Type
String
Example
// get fill pattern repeat
var repeat = shape.fillPatternRepeat();

// repeat pattern in x direction only
shape.fillPatternRepeat('repeat-x');

// do not repeat the pattern
shape.fillPatternRepeat('no-repeat');

fillPatternRotation(rotation)

get/set fill pattern rotation in degrees

Parameters:
Name Type Description
rotation Number
Source:
konva.js
Returns:
Type
Konva.Shape
Example
// get fill pattern rotation
var patternRotation = shape.fillPatternRotation();

// set fill pattern rotation
shape.fillPatternRotation(20);

fillPatternScale(scale)

get/set fill pattern scale

Parameters:
Name Type Description
scale Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get fill pattern scale
var patternScale = shape.fillPatternScale();

// set fill pattern scale
shape.fillPatternScale({
  x: 2,
  y: 2
});

fillPatternScaleX(x)

get/set fill pattern scale x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill pattern scale x
var patternScaleX = shape.fillPatternScaleX();

// set fill pattern scale x
shape.fillPatternScaleX(2);

fillPatternScaleY(y)

get/set fill pattern scale y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill pattern scale y
var patternScaleY = shape.fillPatternScaleY();

// set fill pattern scale y
shape.fillPatternScaleY(2);

fillPatternX(x)

get/set fill pattern x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill pattern x
var fillPatternX = shape.fillPatternX();
// set fill pattern x
shape.fillPatternX(20);

fillPatternY(y)

get/set fill pattern y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill pattern y
var fillPatternY = shape.fillPatternY();
// set fill pattern y
shape.fillPatternY(20);

fillPriority(priority)

get/set fill priority. can be color, pattern, linear-gradient, or radial-gradient. The default is color.
This is handy if you want to toggle between different fill types.

Parameters:
Name Type Description
priority String
Source:
konva.js
Returns:
Type
String
Example
// get fill priority
var fillPriority = shape.fillPriority();

// set fill priority
shape.fillPriority('linear-gradient');

fillRadialGradientColorStops(colorStops)

get/set fill radial gradient color stops

Parameters:
Name Type Description
colorStops Number
Source:
konva.js
Returns:
Type
Array
Example
// get fill radial gradient color stops
var colorStops = shape.fillRadialGradientColorStops();

// create a radial gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');

fillRadialGradientEndPoint(endPoint)

get/set fill radial gradient end point

Parameters:
Name Type Description
endPoint Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get fill radial gradient end point
var endPoint = shape.fillRadialGradientEndPoint();

// set fill radial gradient end point
shape.fillRadialGradientEndPoint({
  x: 20,
  y: 10
});

fillRadialGradientEndPointX(x)

get/set fill radial gradient end point x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill radial gradient end point x
var endPointX = shape.fillRadialGradientEndPointX();

// set fill radial gradient end point x
shape.fillRadialGradientEndPointX(20);

fillRadialGradientEndPointY(y)

get/set fill radial gradient end point y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill radial gradient end point y
var endPointY = shape.fillRadialGradientEndPointY();

// set fill radial gradient end point y
shape.fillRadialGradientEndPointY(20);

fillRadialGradientEndRadius(radius)

get/set fill radial gradient end radius

Parameters:
Name Type Description
radius Number
Source:
konva.js
Returns:
Type
Number
Example
// get radial gradient end radius
var endRadius = shape.fillRadialGradientEndRadius();

// set radial gradient end radius
shape.fillRadialGradientEndRadius(100);

fillRadialGradientStartPoint(startPoint)

get/set fill radial gradient start point

Parameters:
Name Type Description
startPoint Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get fill radial gradient start point
var startPoint = shape.fillRadialGradientStartPoint();

// set fill radial gradient start point
shape.fillRadialGradientStartPoint({
  x: 20,
  y: 10
});

fillRadialGradientStartPointX(x)

get/set fill radial gradient start point x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill radial gradient start point x
var startPointX = shape.fillRadialGradientStartPointX();

// set fill radial gradient start point x
shape.fillRadialGradientStartPointX(20);

fillRadialGradientStartPointY(y)

get/set fill radial gradient start point y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get fill radial gradient start point y
var startPointY = shape.fillRadialGradientStartPointY();

// set fill radial gradient start point y
shape.fillRadialGradientStartPointY(20);

fillRadialGradientStartRadius(radius)

get/set fill radial gradient start radius

Parameters:
Name Type Description
radius Number
Source:
konva.js
Returns:
Type
Number
Example
// get radial gradient start radius
var startRadius = shape.fillRadialGradientStartRadius();

// set radial gradient start radius
shape.fillRadialGradientStartRadius(0);

fillRule(rotation)

get/set fill rule

Parameters:
Name Type Description
rotation CanvasFillRule
Source:
konva.js
Returns:
Type
Konva.Shape
Example
// get fill rule
var fillRule = shape.fillRule();

// set fill rule
shape.fillRule('evenodd');

filters(filters)

get/set filters. Filters are applied to cached canvases

Parameters:
Name Type Description
filters Array

array of filters
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Array
Example
// get filters
var filters = node.filters();

// set a single filter
node.cache();
node.filters([Konva.Filters.Blur]);

// set multiple filters
node.cache();
node.filters([
  Konva.Filters.Blur,
  Konva.Filters.Sepia,
  Konva.Filters.Invert
]);

findAncestor(selector [, includeSelf] [, stopNode])

get ancestor (parent or parent of the parent, etc) of the node that match passed selector

Parameters:
Name Type Argument Description
selector String

selector for search
includeSelf Boolean <optional>

show we think that node is ancestro itself?
stopNode Konva.Node <optional>

optional node where we need to stop searching (one of ancestors)
Inherited From:
Overrides:
Source:
konva.js
Returns:

ancestor

Type
Konva.Node
Example
// get one of the parent group
var group = node.findAncestors('.mygroup');

findAncestors(selector [, includeSelf] [, stopNode])

get all ancestors (parent then parent of the parent, etc) of the node

Parameters:
Name Type Argument Description
selector String

selector for search
includeSelf Boolean <optional>

show we think that node is ancestro itself?
stopNode Konva.Node <optional>

optional node where we need to stop searching (one of ancestors)
Inherited From:
Overrides:
Source:
konva.js
Returns:

[ancestors]

Type
Array
Example
// get one of the parent group
var parentGroups = node.findAncestors('Group');

fire(eventType [, evt] [, bubble])

fire event

Parameters:
Name Type Argument Description
eventType String

event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
evt Event <optional>

event object
bubble Boolean <optional>

setting the value to false, or leaving it undefined, will result in the event
not bubbling. Setting the value to true will result in the event bubbling.
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// manually fire click event
node.fire('click');

// fire custom event
node.fire('foo');

// fire custom event with custom event object
node.fire('foo', {
  bar: 10
});

// fire click event that bubbles
node.fire('click', null, true);

getAbsoluteOpacity()

get absolute opacity

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

getAbsolutePosition(Ancestor)

get absolute position of a node. That function can be used to calculate absolute position, but relative to any ancestor

Parameters:
Name Type Description
Ancestor Object

optional ancestor node
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// returns absolute position relative to top-left corner of canvas
node.getAbsolutePosition();

// calculate absolute position of node, inside stage
// so stage transforms are ignored
node.getAbsolutePosition(stage)

getAbsoluteRotation()

get absolute rotation of the node which takes into
account its ancestor rotations

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get absolute rotation
var rotation = node.getAbsoluteRotation();

getAbsoluteScale()

get absolute scale of the node which takes into
account its ancestor scales

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get absolute scale x
var scaleX = node.getAbsoluteScale().x;

getAbsoluteTransform()

get absolute transform of the node which takes into
account its ancestor transforms

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Transform

getAbsoluteZIndex()

get absolute z-index which takes into account sibling
and ancestor indices

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

getAncestors()

get ancestors

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Array
Example
shape.getAncestors().forEach(function(node) {
  console.log(node.getId());
})

getAttr(attr)

get attr

Parameters:
Name Type Description
attr String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer | String | Object | Array
Example
var x = node.getAttr('x');

getAttrs()

get attrs object literal

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object

getClassName()

get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String

getClientRect(config)

Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
The purpose of the method is similar to getBoundingClientRect API of the DOM.

Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
skipTransform Boolean <optional>

should we apply transform to node for calculating rect?
skipShadow Boolean <optional>

should we apply shadow to the node for calculating bound box?
skipStroke Boolean <optional>

should we apply stroke to the node for calculating bound box?
relativeTo Object <optional>

calculate client rect relative to one of the parents
Inherited From:
Overrides:
Source:
konva.js
Returns:

rect with {x, y, width, height} properties

Type
Object
Example
var rect = new Konva.Rect({
     width : 100,
     height : 100,
     x : 50,
     y : 50,
     strokeWidth : 4,
     stroke : 'black',
     offsetX : 50,
     scaleY : 2
});

// get client rect without think off transformations (position, rotation, scale, offset, etc)
rect.getClientRect({ skipTransform: true});
// returns {
//     x : -2,   // two pixels for stroke / 2
//     y : -2,
//     width : 104, // increased by 4 for stroke
//     height : 104
//}

// get client rect with transformation applied
rect.getClientRect();
// returns Object {x: -2, y: 46, width: 104, height: 208}

getDepth()

get node depth in node tree. Returns an integer.
e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always
be >= 2

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

getLayer()

get layer ancestor

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Layer

getParent()

get parent container

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node

getRelativePointerPosition()

get position of first pointer (like mouse or first touch) relative to local coordinates of current node

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// let's think we have a rectangle at position x = 10, y = 10
// now we clicked at x = 15, y = 15 of the stage
// if you want to know position of the click, related to the rectangle you can use
rect.getRelativePointerPosition();

getSelfRect()

return self rectangle (x, y, width, height) of shape.
This method are not taken into account transformation and styles.

Source:
konva.js
Returns:

rect with {x, y, width, height} properties

Type
Object
Example
rect.getSelfRect();  // return {x:0, y:0, width:rect.width(), height:rect.height()}
circle.getSelfRect();  // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}

getStage()

get stage ancestor

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Stage

getTransform()

get transform of the node

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Transform

getType()

get the node type, which may return Stage, Layer, Group, or Shape

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String

globalCompositeOperation(type)

get/set globalCompositeOperation of a node. globalCompositeOperation DOESN'T affect hit graph of nodes. So they are still trigger to events as they have default "source-over" globalCompositeOperation.

Parameters:
Name Type Description
type String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String
Example
// get globalCompositeOperation
var globalCompositeOperation = shape.globalCompositeOperation();

// set globalCompositeOperation
shape.globalCompositeOperation('source-in');

green(green)

get/set filter green value. Use with Konva.Filters.RGB filter.

Parameters:
Name Type Description
green Integer

value between 0 and 255
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

hasFill()

returns whether or not the shape will be filled

Source:
konva.js
Returns:
Type
Boolean

hasName(name)

check is node has name

Parameters:
Name Type Description
name String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean
Example
node.name('red');
node.hasName('red');   // return true
node.hasName('selected'); // return false
node.hasName(''); // return false

hasShadow()

returns whether or not a shadow will be rendered

Source:
konva.js
Returns:
Type
Boolean

hasStroke()

returns whether or not the shape will be stroked

Source:
konva.js
Returns:
Type
Boolean

height(height)

get/set height

Parameters:
Name Type Description
height Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get height
var height = node.height();

// set height
node.height(100);

hide()

hide node. Hidden nodes are no longer detectable

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node

hitFunc(drawFunc)

get/set hit draw function. That function is used to draw custom hit area of a shape.

Parameters:
Name Type Description
drawFunc function

drawing function
Source:
konva.js
Returns:
Type
function
Example
// get hit draw function
var hitFunc = shape.hitFunc();

// set hit draw function
shape.hitFunc(function(context) {
  context.beginPath();
  context.rect(0, 0, shape.width(), shape.height());
  context.closePath();
  // important Konva method that fill and stroke shape from its properties
  context.fillStrokeShape(shape);
});

hitStrokeWidth(hitStrokeWidth)

get/set stroke width for hit detection. Default value is "auto", it means it will be equals to strokeWidth

Parameters:
Name Type Description
hitStrokeWidth Number
Source:
konva.js
Returns:
Type
Number
Example
// get stroke width
var hitStrokeWidth = shape.hitStrokeWidth();

// set hit stroke width
shape.hitStrokeWidth(20);
// set hit stroke width always equals to scene stroke width
shape.hitStrokeWidth('auto');

hue(hue)

get/set hsv hue in degrees. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.

Parameters:
Name Type Description
hue Number

value between 0 and 359
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

id(id)

get/set id. Id is global for whole page.

Parameters:
Name Type Description
id String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String
Example
// get id
var name = node.id();

// set id
node.id('foo');

intersects(point)

determines if point is in the shape, regardless if other shapes are on top of it. Note: because
this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times
consecutively. Please use the Konva.Stage#getIntersection method if at all possible
because it performs much better

Parameters:
Name Type Description
point Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Boolean

isCached()

determine if node is currently cached

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

isClientRectOnScreen(margin)

determine if node (at least partially) is currently in user-visible area

Parameters:
Name Type Description
margin Number | Object

optional margin in pixels

Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean
Example
// get index
// default calculations
var isOnScreen = node.isClientRectOnScreen()
// increase object size (or screen size) for cases when objects close to the screen still need to be marked as "visible"
var isOnScreen = node.isClientRectOnScreen({ x: stage.width(), y: stage.height() })

isDragging()

determine if node is currently in drag and drop mode

Inherited From:
Overrides:
Source:
konva.js

isListening()

determine if node is listening for events by taking into account ancestors.

Parent | Self | isListening
listening | listening |
----------+-----------+------------
T | T | T
T | F | F
F | T | F
F | F | F

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

isVisible()

determine if node is visible by taking into account ancestors.

Parent | Self | isVisible
visible | visible |
----------+-----------+------------
T | T | T
T | F | F
F | T | F
F | F | F

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

kaleidoscopeAngle(degrees)

get/set kaleidoscope angle. Use with Konva.Filters.Kaleidoscope filter.

Parameters:
Name Type Description
degrees Integer
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

kaleidoscopePower(power)

get/set kaleidoscope power. Use with Konva.Filters.Kaleidoscope filter.

Parameters:
Name Type Description
power Integer

of kaleidoscope
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

levels(level)

get/set levels. Must be a number between 0 and 1. Use with Konva.Filters.Posterize filter.

Parameters:
Name Type Description
level Number

between 0 and 1
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

linearLinearGradientStartPointX(x)

get/set stroke linear gradient start point x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get stroke linear gradient start point x
var startPointX = shape.strokeLinearGradientStartPointX();

// set stroke linear gradient start point x
shape.strokeLinearGradientStartPointX(20);

lineCap(lineCap)

get/set line cap. Can be butt, round, or square

Parameters:
Name Type Description
lineCap String
Source:
konva.js
Returns:
Type
String
Example
// get line cap
var lineCap = shape.lineCap();

// set line cap
shape.lineCap('round');

lineJoin(lineJoin)

get/set line join. Can be miter, round, or bevel. The
default is miter

Parameters:
Name Type Description
lineJoin String
Source:
konva.js
Returns:
Type
String
Example
// get line join
var lineJoin = shape.lineJoin();

// set line join
shape.lineJoin('round');

listening(listening)

get/set listening attr. If you need to determine if a node is listening or not
by taking into account its parents, use the isListening() method
nodes with listening set to false will not be detected in hit graph
so they will be ignored in container.getIntersection() method

Parameters:
Name Type Description
listening Boolean

Can be true, or false. The default is true.
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean
Example
// get listening attr
var listening = node.listening();

// stop listening for events, remove node and all its children from hit graph
node.listening(false);

// listen to events according to the parent
node.listening(true);

luminance(value)

get/set hsl luminance. Use with Konva.Filters.HSL filter.

Parameters:
Name Type Description
value Number

from -1 to 1
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

move(change)

move node by an amount relative to its current position

Parameters:
Name Type Description
change Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// move node in x direction by 1px and y direction by 2px
node.move({
  x: 1,
  y: 2
});

moveDown()

move node down

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

moveTo(newContainer)

move node to another container

Parameters:
Name Type Description
newContainer Container
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// move node from current layer into layer2
node.moveTo(layer2);

moveToBottom()

move node to the bottom of its siblings

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

moveToTop()

move node to the top of its siblings

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean

moveUp()

move node up

Inherited From:
Overrides:
Source:
konva.js
Returns:

flag is moved or not

Type
Boolean

name(name)

get/set name.

Parameters:
Name Type Description
name String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String
Example
// get name
var name = node.name();

// set name
node.name('foo');

// also node may have multiple names (as css classes)
node.name('foo bar');

noise(noise)

get/set noise amount. Must be a value between 0 and 1. Use with Konva.Filters.Noise filter.

Parameters:
Name Type Description
noise Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

off(evtStr)

remove event bindings from the node. Pass in a string of
event types delimmited by a space to remove multiple event
bindings at once such as 'mousedown mouseup mousemove'.
include a namespace to remove an event binding by name
such as 'click.foobar'. If you only give a name like '.foobar',
all events in that namespace will be removed.

Parameters:
Name Type Description
evtStr String

e.g. 'click', 'mousedown touchstart', '.foobar'
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// remove listener
node.off('click');

// remove multiple listeners
node.off('click touchstart');

// remove listener by name
node.off('click.foo');

offsetX(x)

get/set offset x

Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get offset x
var offsetX = node.offsetX();

// set offset x
node.offsetX(3);

offsetY(y)

get/set offset y

Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get offset y
var offsetY = node.offsetY();

// set offset y
node.offsetY(3);

on(evtStr, handler)

bind events to the node. KonvaJS supports mouseover, mousemove,
mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
touchend, tap, dbltap, dragstart, dragmove, and dragend events.
Pass in a string of events delimited by a space to bind multiple events at once
such as 'mousedown mouseup mousemove'. Include a namespace to bind an
event by name such as 'click.foobar'.

Parameters:
Name Type Description
evtStr String

e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
handler function

The handler function. The first argument of that function is event object. Event object has target as main target of the event, currentTarget as current node listener and evt as native browser event.
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
// add click listener
node.on('click', function() {
  console.log('you clicked me!');
});

// get the target node
node.on('click', function(evt) {
  console.log(evt.target);
});

// stop event propagation
node.on('click', function(evt) {
  evt.cancelBubble = true;
});

// bind multiple listeners
node.on('click touchstart', function() {
  console.log('you clicked/touched me!');
});

// namespace listener
node.on('click.foo', function() {
  console.log('you clicked/touched me!');
});

// get the event type
node.on('click tap', function(evt) {
  var eventType = evt.type;
});

// get native event object
node.on('click tap', function(evt) {
  var nativeEvent = evt.evt;
});

// for change events, get the old and new val
node.on('xChange', function(evt) {
  var oldVal = evt.oldVal;
  var newVal = evt.newVal;
});

// get event targets
// with event delegations
layer.on('click', 'Group', function(evt) {
  var shape = evt.target;
  var group = evt.currentTarget;
});

opacity(opacity)

get/set opacity. Opacity values range from 0 to 1.
A node with an opacity of 0 is fully transparent, and a node
with an opacity of 1 is fully opaque

Parameters:
Name Type Description
opacity Object
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get opacity
var opacity = node.opacity();

// set opacity
node.opacity(0.5);

perfectDrawEnabled(perfectDrawEnabled)

get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set perfectDrawEnabled to false to improve performance.
See http://konvajs.org/docs/performance/Disable_Perfect_Draw.html for more information.
Default value is true

Parameters:
Name Type Description
perfectDrawEnabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get perfectDrawEnabled
var perfectDrawEnabled = shape.perfectDrawEnabled();

// set perfectDrawEnabled
shape.perfectDrawEnabled();

pixelSize(pixelSize)

get/set pixel size. Use with Konva.Filters.Pixelate filter.

Parameters:
Name Type Description
pixelSize Integer
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

position(pos)

get/set node position relative to parent

Parameters:
Name Type Description
pos Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get position
var position = node.position();

// set position
node.position({
  x: 5,
  y: 10
});

preventDefault(preventDefault)

get/set preventDefault
By default all shapes will prevent default behavior
of a browser on a pointer move or tap.
that will prevent native scrolling when you are trying to drag&drop a node
but sometimes you may need to enable default actions
in that case you can set the property to false

Parameters:
Name Type Description
preventDefault Boolean
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean
Example
// get preventDefault
var shouldPrevent = shape.preventDefault();

// set preventDefault
shape.preventDefault(false);

red(red)

get/set filter red value. Use with Konva.Filters.RGB filter.

Parameters:
Name Type Description
red Integer

value between 0 and 255
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer

remove()

remove a node from parent, but don't destroy. You can reuse the node later.

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
node.remove();

removeName(name)

remove name from node

Parameters:
Name Type Description
name String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
node.name('red selected');
node.removeName('selected');
node.hasName('selected'); // return false
node.name(); // return 'red'

rotate(theta)

rotate node by an amount in degrees relative to its current rotation

Parameters:
Name Type Description
theta Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node

rotation(rotation)

get/set rotation in degrees

Parameters:
Name Type Description
rotation Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get rotation in degrees
var rotation = node.rotation();

// set rotation in degrees
node.rotation(45);

saturation(saturation)

get/set hsv saturation. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.

Parameters:
Name Type Description
saturation Number

0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

scale(scale)

get/set scale

Parameters:
Name Type Description
scale Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get scale
var scale = node.scale();

// set scale
shape.scale({
  x: 2,
  y: 3
});

scaleX(x)

get/set scale x

Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get scale x
var scaleX = node.scaleX();

// set scale x
node.scaleX(2);

scaleY(y)

get/set scale y

Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get scale y
var scaleY = node.scaleY();

// set scale y
node.scaleY(2);

sceneFunc(drawFunc)

get/set scene draw function. That function is used to draw the shape on a canvas.
Also that function will be used to draw hit area of the shape, in case if hitFunc is not defined.

Parameters:
Name Type Description
drawFunc function

drawing function
Source:
konva.js
Returns:
Type
function
Example
// get scene draw function
var sceneFunc = shape.sceneFunc();

// set scene draw function
shape.sceneFunc(function(context, shape) {
  context.beginPath();
  context.rect(0, 0, shape.width(), shape.height());
  context.closePath();
  // important Konva method that fill and stroke shape from its properties
  // like stroke and fill
  context.fillStrokeShape(shape);
});

setAttr(attr, val)

set attr

Parameters:
Name Type Description
attr String
val *
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
node.setAttr('x', 5);

setAttrs(config)

set multiple attrs at once using an object literal

Parameters:
Name Type Description
config Object

object containing key value pairs
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node
Example
node.setAttrs({
  x: 5,
  fill: 'red'
});

shadowBlur(blur)

get/set shadow blur

Parameters:
Name Type Description
blur Number
Source:
konva.js
Returns:
Type
Number
Example
// get shadow blur
var shadowBlur = shape.shadowBlur();

// set shadow blur
shape.shadowBlur(10);

shadowColor(color)

get/set shadow color

Parameters:
Name Type Description
color String
Source:
konva.js
Returns:
Type
String
Example
// get shadow color
var shadow = shape.shadowColor();

// set shadow color with color string
shape.shadowColor('green');

// set shadow color with hex
shape.shadowColor('#00ff00');

// set shadow color with rgb
shape.shadowColor('rgb(0,255,0)');

// set shadow color with rgba and make it 50% opaque
shape.shadowColor('rgba(0,255,0,0.5');

shadowEnabled(enabled)

get/set shadow enabled flag

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get shadow enabled flag
var shadowEnabled = shape.shadowEnabled();

// disable shadow
shape.shadowEnabled(false);

// enable shadow
shape.shadowEnabled(true);

shadowForStrokeEnabled(shadowForStrokeEnabled)

get/set shadowForStrokeEnabled. Useful for performance optimization.
You may set shape.shadowForStrokeEnabled(false). In this case stroke will no effect shadow.
Remember if you set shadowForStrokeEnabled = false for non closed line - that line will have no shadow!.
Default value is true

Parameters:
Name Type Description
shadowForStrokeEnabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get shadowForStrokeEnabled
var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();

// set shadowForStrokeEnabled
shape.shadowForStrokeEnabled();

shadowOffset(offset)

get/set shadow offset

Parameters:
Name Type Description
offset Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get shadow offset
var shadowOffset = shape.shadowOffset();

// set shadow offset
shape.shadowOffset({
  x: 20,
  y: 10
});

shadowOffsetX(x)

get/set shadow offset x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get shadow offset x
var shadowOffsetX = shape.shadowOffsetX();

// set shadow offset x
shape.shadowOffsetX(5);

shadowOffsetY(y)

get/set shadow offset y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get shadow offset y
var shadowOffsetY = shape.shadowOffsetY();

// set shadow offset y
shape.shadowOffsetY(5);

shadowOpacity(opacity)

get/set shadow opacity. must be a value between 0 and 1

Parameters:
Name Type Description
opacity Number
Source:
konva.js
Returns:
Type
Number
Example
// get shadow opacity
var shadowOpacity = shape.shadowOpacity();

// set shadow opacity
shape.shadowOpacity(0.5);

show()

show node. set visible = true

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Konva.Node

size(size)

get/set node size

Parameters:
Name Type Description
size Object
Properties
Name Type Description
width Number
height Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get node size
var size = node.size();
var width = size.width;
var height = size.height;

// set size
node.size({
  width: 100,
  height: 200
});

skew(skew)

get/set skew

Parameters:
Name Type Description
skew Object
Properties
Name Type Description
x Number
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get skew
var skew = node.skew();

// set skew
node.skew({
  x: 20,
  y: 10
});

skewX(x)

get/set skew x

Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get skew x
var skewX = node.skewX();

// set skew x
node.skewX(3);

skewY(y)

get/set skew y

Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get skew y
var skewY = node.skewY();

// set skew y
node.skewY(3);

startDrag()

initiate drag and drop.

Inherited From:
Overrides:
Source:
konva.js

stopDrag()

stop drag and drop

Inherited From:
Overrides:
Source:
konva.js

stroke(color)

get/set stroke color

Parameters:
Name Type Description
color String
Source:
konva.js
Returns:
Type
String
Example
// get stroke color
var stroke = shape.stroke();

// set stroke color with color string
shape.stroke('green');

// set stroke color with hex
shape.stroke('#00ff00');

// set stroke color with rgb
shape.stroke('rgb(0,255,0)');

// set stroke color with rgba and make it 50% opaque
shape.stroke('rgba(0,255,0,0.5');

strokeEnabled(enabled)

get/set stroke enabled flag

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get stroke enabled flag
var strokeEnabled = shape.strokeEnabled();

// disable stroke
shape.strokeEnabled(false);

// enable stroke
shape.strokeEnabled(true);

strokeHitEnabled(strokeHitEnabled)

deprecated, use hitStrokeWidth instead! get/set strokeHitEnabled property. Useful for performance optimization.
You may set shape.strokeHitEnabled(false). In this case stroke will be no draw on hit canvas, so hit area
of shape will be decreased (by lineWidth / 2). Remember that non closed line with strokeHitEnabled = false
will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)
Default value is true.

Parameters:
Name Type Description
strokeHitEnabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get strokeHitEnabled
var strokeHitEnabled = shape.strokeHitEnabled();

// set strokeHitEnabled
shape.strokeHitEnabled();

strokeLinearGradientColorStops(colorStops)

get/set stroke linear gradient color stops

Parameters:
Name Type Description
colorStops Array
Source:
konva.js
Returns:

colorStops

Type
Array
Example
// get stroke linear gradient color stops
var colorStops = shape.strokeLinearGradientColorStops();

// create a linear gradient that starts with red, changes to blue
// halfway through, and then changes to green
shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);

strokeLinearGradientEndPoint(endPoint)

get/set stroke linear gradient end point

Parameters:
Name Type Description
endPoint Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get stroke linear gradient end point
var endPoint = shape.strokeLinearGradientEndPoint();

// set stroke linear gradient end point
shape.strokeLinearGradientEndPoint({
  x: 20,
  y: 10
});

strokeLinearGradientEndPointX(x)

get/set fill linear gradient end point x

Parameters:
Name Type Description
x Number
Source:
konva.js
Returns:
Type
Number
Example
// get stroke linear gradient end point x
var endPointX = shape.strokeLinearGradientEndPointX();

// set stroke linear gradient end point x
shape.strokeLinearGradientEndPointX(20);

strokeLinearGradientEndPointY(y)

get/set stroke linear gradient end point y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get stroke linear gradient end point y
var endPointY = shape.strokeLinearGradientEndPointY();

// set stroke linear gradient end point y
shape.strokeLinearGradientEndPointY(20);

strokeLinearGradientStartPoint(startPoint)

get/set stroke linear gradient start point

Parameters:
Name Type Description
startPoint Object
Properties
Name Type Description
x Number
y Number
Source:
konva.js
Returns:
Type
Object
Example
// get stroke linear gradient start point
var startPoint = shape.strokeLinearGradientStartPoint();

// set stroke linear gradient start point
shape.strokeLinearGradientStartPoint({
  x: 20,
  y: 10
});

strokeLinearGradientStartPointY(y)

get/set stroke linear gradient start point y

Parameters:
Name Type Description
y Number
Source:
konva.js
Returns:
Type
Number
Example
// get stroke linear gradient start point y
var startPointY = shape.strokeLinearGradientStartPointY();

// set stroke linear gradient start point y
shape.strokeLinearGradientStartPointY(20);

strokeScaleEnabled(enabled)

get/set strokeScale enabled flag

Parameters:
Name Type Description
enabled Boolean
Source:
konva.js
Returns:
Type
Boolean
Example
// get stroke scale enabled flag
var strokeScaleEnabled = shape.strokeScaleEnabled();

// disable stroke scale
shape.strokeScaleEnabled(false);

// enable stroke scale
shape.strokeScaleEnabled(true);

strokeWidth(strokeWidth)

get/set stroke width

Parameters:
Name Type Description
strokeWidth Number
Source:
konva.js
Returns:
Type
Number
Example
// get stroke width
var strokeWidth = shape.strokeWidth();

// set stroke width
shape.strokeWidth(10);

threshold(threshold)

get/set threshold. Must be a value between 0 and 1. Use with Konva.Filters.Threshold or Konva.Filters.Mask filter.

Parameters:
Name Type Description
threshold Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

to( [params])

Tween node properties. Shorter usage of Konva.Tween object.

Parameters:
Name Type Argument Description
params Object <optional>

tween params
Inherited From:
Overrides:
Source:
konva.js
Example
circle.to({
  x : 50,
  duration : 0.5,
  onUpdate: () => console.log('props updated'),
  onFinish: () => console.log('finished'),
});

toBlob(config)

Converts node into a blob. Since the toBlob method is asynchronous,
the resulting blob can only be retrieved from the config callback
or the returned Promise.

Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
callback function <optional>

function executed when the composite has completed
x Number <optional>

x position of canvas section
y Number <optional>

y position of canvas section
width Number <optional>

width of canvas section
height Number <optional>

height of canvas section
pixelRatio Number <optional>

pixelRatio of output canvas. Default is 1.
You can use that property to increase quality of the image, for example for super hight quality exports
or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
imageSmoothingEnabled Boolean <optional>

set this to false if you want to disable imageSmoothing
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Promise.<Blob>
Example
var blob = await node.toBlob({});

toCanvas(config)

converts node into an canvas element.

Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
callback function

function executed when the composite has completed
x Number <optional>

x position of canvas section
y Number <optional>

y position of canvas section
width Number <optional>

width of canvas section
height Number <optional>

height of canvas section
pixelRatio Number <optional>

pixelRatio of output canvas. Default is 1.
You can use that property to increase quality of the image, for example for super hight quality exports
or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
imageSmoothingEnabled Boolean <optional>

set this to false if you want to disable imageSmoothing
Inherited From:
Overrides:
Source:
konva.js
Example
var canvas = node.toCanvas();

toDataURL(config)

Creates a composite data URL (base64 string). If MIME type is not
specified, then "image/png" will result. For "image/jpeg", specify a quality
level as quality (range 0.0 - 1.0)

Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
mimeType String <optional>

can be "image/png" or "image/jpeg".
"image/png" is the default
x Number <optional>

x position of canvas section
y Number <optional>

y position of canvas section
width Number <optional>

width of canvas section
height Number <optional>

height of canvas section
quality Number <optional>

jpeg quality. If using an "image/jpeg" mimeType,
you can specify the quality from 0 to 1, where 0 is very poor quality and 1
is very high quality
pixelRatio Number <optional>

pixelRatio of output image url. Default is 1.
You can use that property to increase quality of the image, for example for super hight quality exports
or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
imageSmoothingEnabled Boolean <optional>

set this to false if you want to disable imageSmoothing
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String

toImage(config)

converts node into an image. Since the toImage
method is asynchronous, the resulting image can only be retrieved from the config callback
or the returned Promise. toImage is most commonly used
to cache complex drawings as an image so that they don't have to constantly be redrawn

Parameters:
Name Type Description
config Object
Properties
Name Type Argument Description
callback function <optional>

function executed when the composite has completed
mimeType String <optional>

can be "image/png" or "image/jpeg".
"image/png" is the default
x Number <optional>

x position of canvas section
y Number <optional>

y position of canvas section
width Number <optional>

width of canvas section
height Number <optional>

height of canvas section
quality Number <optional>

jpeg quality. If using an "image/jpeg" mimeType,
you can specify the quality from 0 to 1, where 0 is very poor quality and 1
is very high quality
pixelRatio Number <optional>

pixelRatio of output image. Default is 1.
You can use that property to increase quality of the image, for example for super hight quality exports
or usage on retina (or similar) displays. pixelRatio will be used to multiply the size of exported image.
If you export to 500x500 size with pixelRatio = 2, then produced image will have size 1000x1000.
imageSmoothingEnabled Boolean <optional>

set this to false if you want to disable imageSmoothing
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Promise.<Image>
Example
var image = node.toImage({
  callback(img) {
    // do stuff with img
  }
});

toJSON()

convert Node into a JSON string. Returns a JSON string.

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String

toObject()

convert Node into an object for serialization. Returns an object.

Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object

transformsEnabled(enabled)

get/set transforms that are enabled. Can be "all", "none", or "position". The default
is "all"

Parameters:
Name Type Description
enabled String
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
String
Example
// enable position transform only to improve draw performance
node.transformsEnabled('position');

// enable all transforms
node.transformsEnabled('all');

value(value)

get/set hsv value. Use with Konva.Filters.HSV filter.

Parameters:
Name Type Description
value Number

0 is no change, -1.0 halves the value, 1.0 doubles, etc..
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number

visible(visible)

get/set visible attr. Can be true, or false. The default is true.
If you need to determine if a node is visible or not
by taking into account its parents, use the isVisible() method

Parameters:
Name Type Description
visible Boolean
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Boolean
Example
// get visible attr
var visible = node.visible();

// make invisible
node.visible(false);

// make visible (according to the parent)
node.visible(true);

width(width)

get/set width

Parameters:
Name Type Description
width Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get width
var width = node.width();

// set width
node.width(100);

x(x)

get/set x position

Parameters:
Name Type Description
x Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Object
Example
// get x
var x = node.x();

// set x
node.x(5);

y(y)

get/set y position

Parameters:
Name Type Description
y Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Integer
Example
// get y
var y = node.y();

// set y
node.y(5);

zIndex(index)

get/set zIndex relative to the node's siblings who share the same parent.
Please remember that zIndex is not absolute (like in CSS). It is relative to parent element only.

Parameters:
Name Type Description
index Number
Inherited From:
Overrides:
Source:
konva.js
Returns:
Type
Number
Example
// get index
var index = node.zIndex();

// set index
node.zIndex(2);