+
+
+-
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ alpha |
+
+
+
+
+
+Float
+
+
+
+
+ |
+
+
+
+
+
+ value between 0 and 1 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Float
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
animation(anim)
+
+
+
+-
+
+
+
+
get/set animation key
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ anim |
+
+
+
+
+
+String
+
+
+
+
+ |
+
+
+
+
+
+ animation key |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+String
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get animation key
+var animation = sprite.animation();
+
+// set animation key
+sprite.animation('kicking');
+
+
+
+
+
+
+
+
+-
+
animations(animations)
+
+
+
+-
+
+
+
+
get/set animations map
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ animations |
+
+
+
+
+
+Object
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Object
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get animations map
+var animations = sprite.animations();
+
+// set animations map
+sprite.animations({
+ standing: [
+ // x, y, width, height (6 frames)
+ 0, 0, 49, 109,
+ 52, 0, 49, 109,
+ 105, 0, 49, 109,
+ 158, 0, 49, 109,
+ 210, 0, 49, 109,
+ 262, 0, 49, 109
+ ],
+ kicking: [
+ // x, y, width, height (6 frames)
+ 0, 109, 45, 98,
+ 45, 109, 45, 98,
+ 95, 109, 63, 98,
+ 156, 109, 70, 98,
+ 229, 109, 60, 98,
+ 287, 109, 41, 98
+ ]
+});
+
+
+
+
+
+
+
+
+-
+
blue(blue)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ blue |
+
+
+
+
+
+Integer
+
+
+
+
+ |
+
+
+
+
+
+ value between 0 and 255 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Integer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
blurRadius(radius)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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]);
+
+
+
+
+
+
+
+
+-
+
dashEnabled(enabled)
+
+
+
+-
+
+
+
+
get/set dash enabled flag
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ enabled |
+
+
+
+
+
+Boolean
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Konva.Shape
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ shape.cache();
+shape.drawHitFromCache();
+
+
+
+
+
+
+
+
+-
+
embossBlend(embossBlend)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ embossBlend |
+
+
+
+
+
+Boolean
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Boolean
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
embossDirection(embossDirection)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ amount |
+
+
+
+
+
+Float
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Float
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
fill(color)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ color |
+
+
+
+
+
+String
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+
+
+ -
+ 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ rotation |
+
+
+
+
+
+CanvasFillRule
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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:
+
+
+
+
+
+
+
+ -
+ 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:
+
+
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Array
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get one of the parent group
+var parentGroups = node.findAncestors('Group');
+
+
+
+
+
+
+
+
+-
+
fire(eventType [, evt] [, bubble])
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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);
+
+
+
+
+
+
+
+
+-
+
frameIndex(frameIndex)
+
+
+
+-
+
+
+
+
set/set animation frame index
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ frameIndex |
+
+
+
+
+
+Integer
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Integer
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get animation frame index
+var frameIndex = sprite.frameIndex();
+
+// set animation frame index
+sprite.frameIndex(3);
+
+
+
+
+
+
+
+
+-
+
frameRate(frameRate)
+
+
+
+-
+
+
+
+
get/set frame rate in frames per second. Increase this number to make the sprite
+animation run faster, and decrease the number to make the sprite animation run slower
+The default is 17 frames per second
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ frameRate |
+
+
+
+
+
+Integer
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Integer
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get frame rate
+var frameRate = sprite.frameRate();
+
+// set frame rate to 2 frames per second
+sprite.frameRate(2);
+
+
+
+
+
+
+
+
+-
+
getAbsoluteOpacity()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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;
+
+
+
+
+
+
+
+
+-
+
+
+
+
+-
+
+
+
+
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()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Array
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ shape.getAncestors().forEach(function(node) {
+ console.log(node.getId());
+})
+
+
+
+
+
+
+
+
+-
+
getAttr(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()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Konva.Layer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
getParent()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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.
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Konva.Stage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
+-
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Boolean
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
hasStroke()
+
+
+
+-
+
+
+
+
returns whether or not the shape will be stroked
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Boolean
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
height(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 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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');
+
+
+
+
+
+
+
+
+-
+
image(image)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ image |
+
+
+
+
+
+Image
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Image
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get image
+var image = sprite.image();
+
+// set image
+sprite.image(imageObj);
+
+
+
+
+
+
+
+
+-
+
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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
isRunning()
+
+
+
+-
+
+
+
+
determine if animation of sprite is running or not. returns true or false
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Boolean
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
name(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');
+
+
+
+
+
+
+
+
+-
+
offsets(offsets)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ offsets |
+
+
+
+
+
+Object
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Object
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get offsets map
+var offsets = sprite.offsets();
+
+// set offsets map
+sprite.offsets({
+ standing: [
+ // x, y (6 frames)
+ 0, 0,
+ 0, 0,
+ 5, 0,
+ 0, 0,
+ 0, 3,
+ 2, 0
+ ],
+ kicking: [
+ // x, y (6 frames)
+ 0, 5,
+ 5, 0,
+ 10, 0,
+ 0, 0,
+ 2, 1,
+ 0, 0
+ ]
+});
+
+
+
+
+
+
+
+
+-
+
offsetX(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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Boolean
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get perfectDrawEnabled
+var perfectDrawEnabled = shape.perfectDrawEnabled();
+
+// set perfectDrawEnabled
+shape.perfectDrawEnabled();
+
+
+
+
+
+
+
+
+-
+
pixelSize(pixelSize)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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 |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ blur |
+
+
+
+
+
+Number
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Number
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get shadow blur
+var shadowBlur = shape.shadowBlur();
+
+// set shadow blur
+shape.shadowBlur(10);
+
+
+
+
+
+
+
+
+-
+
shadowColor(color)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ color |
+
+
+
+
+
+String
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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);
+
+
+
+
+
+
+
+
+-
+
start()
+
+
+
+-
+
+
+
+
start sprite animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
startDrag()
+
+
+
+-
+
+
+
+
initiate drag and drop.
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
stop()
+
+
+
+-
+
+
+
+
stop sprite animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
stopDrag()
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
stroke(color)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ color |
+
+
+
+
+
+String
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+
+
+ -
+ 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - 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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
Parameters:
+
+
+
+
+
+
+ | Name |
+
+
+ Type |
+
+
+
+
+
+ Description |
+
+
+
+
+
+
+
+
+ strokeWidth |
+
+
+
+
+
+Number
+
+
+
+
+ |
+
+
+
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Inherited From:
+ -
+
+
+
+
+
+ - Overrides:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - Source:
+ -
+ konva.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Returns:
+
+
+
+
+
+ -
+ Type
+
+ -
+
+Number
+
+
+
+
+
+
+
+
+
+
+ Example
+
+ // get stroke width
+var strokeWidth = shape.strokeWidth();
+
+// set stroke width
+shape.strokeWidth(10);
+
+
+
+
+
+
+
+
+-
+
threshold(threshold)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
+-
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
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);
+
+
+
+
+
+
+
+
+
+
+
+
+
