new Group(config)
Parameters:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
config |
Object |
Properties
|
- Source:
- konva.js
Example
var group = new Konva.Group();
Extends
Methods
-
absolutePosition(pos)
-
get/set node absolute position
Parameters:
Name Type Description pos
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get position var position = node.absolutePosition(); // set position node.absolutePosition({ x: 5, y: 10 });
-
add(children)
-
add a child and children into container
Parameters:
Name Type Argument Description children
Konva.Node <repeatable>
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Container
Example
layer.add(rect); layer.add(shape1, shape2, shape3); // empty arrays are accepted, though each individual child must be defined layer.add(...shapes); // remember to redraw layer if you changed something layer.draw();
-
addName(name)
-
add name to node
Parameters:
Name Type Description name
String - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
node.name('red'); node.addName('selected'); node.name(); // return 'red selected'
-
alpha(alpha)
-
get/set filter alpha value. Use with Konva.Filters.RGBA filter.
Parameters:
Name Type Description alpha
Float value between 0 and 1
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Float
-
blue(blue)
-
get/set filter blue value. Use with Konva.Filters.RGB filter.
Parameters:
Name Type Description blue
Integer value between 0 and 255
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Integer
-
blurRadius(radius)
-
get/set blur radius. Use with Konva.Filters.Blur filter
Parameters:
Name Type Description radius
Integer - Inherited From:
- 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:
- 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 customKonva.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 purposespixelRatio
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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
// cache a shape with the x,y position of the bounding box at the center and // the width and height of the bounding box equal to the width and height of // the shape obtained from shape.width() and shape.height() image.cache(); // cache a node and define the bounding box position and size node.cache({ x: -30, y: -30, width: 100, height: 200 }); // cache a node and draw a red border around the bounding box // for debugging purposes node.cache({ x: -30, y: -30, width: 100, height: 200, offset : 10, drawBorder: true });
-
clearCache()
-
clear cached canvas
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
node.clearCache();
-
clip(clip)
-
get/set clip
Parameters:
Name Type Description clip
Object Properties
Name Type Description x
Number y
Number width
Number height
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get clip var clip = container.clip(); // set clip container.clip({ x: 20, y: 20, width: 20, height: 20 });
-
clipFunc(function)
-
get/set clip function
Parameters:
Name Type Description function
function - Inherited From:
- Source:
- konva.js
Returns:
- Type
- function
Example
// get clip function var clipFunction = container.clipFunc(); // set clip function container.clipFunc(function(ctx) { ctx.rect(0, 0, 100, 100); }); container.clipFunc(function(ctx) { // optionally return a clip Path2D and clip-rule or just the clip-rule return [new Path2D('M0 0v50h50Z'), 'evenodd'] });
-
clipHeight(height)
-
get/set clip height
Parameters:
Name Type Description height
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get clip height var clipHeight = container.clipHeight(); // set clip height container.clipHeight(100);
-
clipWidth(width)
-
get/set clip width
Parameters:
Name Type Description width
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get clip width var clipWidth = container.clipWidth(); // set clip width container.clipWidth(100);
-
clipX(x)
-
get/set clip x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get clip x var clipX = container.clipX(); // set clip x container.clipX(10);
-
clipY(y)
-
get/set clip y
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get clip y var clipY = container.clipY(); // set clip y container.clipY(10);
-
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 nodeParameters:
Name Type Description obj
Object override attrs
- Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Number
-
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:
- Source:
- konva.js
Example
node.destroy();
-
destroyChildren()
-
destroy all children nodes.
- Inherited From:
- Source:
- konva.js
-
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:
- 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:
- 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:
- 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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
-
embossBlend(embossBlend)
-
get/set emboss blend. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description embossBlend
Boolean - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
-
embossDirection(embossDirection)
-
get/set emboss direction. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description embossDirection
String can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left
The default is top-left- Inherited From:
- Source:
- konva.js
Returns:
- Type
- String
-
embossStrength(level)
-
get/set emboss strength. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description level
Number between 0 and 1. Default is 0.5
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
-
embossWhiteLevel(embossWhiteLevel)
-
get/set emboss white level. Use with Konva.Filters.Emboss filter.
Parameters:
Name Type Description embossWhiteLevel
Number between 0 and 1. Default is 0.5
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
-
enhance(amount)
-
get/set enhance. Use with Konva.Filters.Enhance filter. -1 to 1 values
Parameters:
Name Type Description amount
Float - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Float
-
filters(filters)
-
get/set filters. Filters are applied to cached canvases
Parameters:
Name Type Description filters
Array array of filters
- Inherited From:
- 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 ]);
-
find(selector)
-
return an array of nodes that match the selector.
You can provide a string with '#' for id selections and '.' for name selections.
Or a function that will return true/false when a node is passed through. See example below.
With strings you can also select by type or class name. Pass multiple selectors
separated by a comma.Parameters:
Name Type Description selector
String | function - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Array
Example
Passing a string as a selector // select node with id foo var node = stage.find('#foo'); // select nodes with name bar inside layer var nodes = layer.find('.bar'); // select all groups inside layer var nodes = layer.find('Group'); // select all rectangles inside layer var nodes = layer.find('Rect'); // select node with an id of foo or a name of bar inside layer var nodes = layer.find('#foo, .bar'); Passing a function as a selector // get all groups with a function var groups = stage.find(node => { return node.getType() === 'Group'; }); // get only Nodes with partial opacity var alphaNodes = layer.find(node => { return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1; });
-
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:
- Source:
- konva.js
Returns:
ancestor
- Type
- Konva.Node
Example
// get one of the parent group var group = node.findAncestors('.mygroup');
-
findAncestors(selector [, includeSelf] [, stopNode])
-
get all ancestors (parent then parent of the parent, etc) of the node
Parameters:
Name Type Argument Description selector
String selector for search
includeSelf
Boolean <optional>
show we think that node is ancestro itself?
stopNode
Konva.Node <optional>
optional node where we need to stop searching (one of ancestors)
- Inherited From:
- Source:
- konva.js
Returns:
[ancestors]
- Type
- Array
Example
// get one of the parent group var parentGroups = node.findAncestors('Group');
-
findOne(selector)
-
return a first node from
find
methodParameters:
Name Type Description selector
String | function - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Node | Undefined
Example
// select node with id foo var node = stage.findOne('#foo'); // select node with name bar inside layer var nodes = layer.findOne('.bar'); // select the first node to return true in a function var node = stage.findOne(node => { return node.getType() === 'Shape' })
-
fire(eventType [, evt] [, bubble])
-
fire event
Parameters:
Name Type Argument Description eventType
String event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
evt
Event <optional>
event object
bubble
Boolean <optional>
setting the value to false, or leaving it undefined, will result in the event
not bubbling. Setting the value to true will result in the event bubbling.- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
// manually fire click event node.fire('click'); // fire custom event node.fire('foo'); // fire custom event with custom event object node.fire('foo', { bar: 10 }); // fire click event that bubbles node.fire('click', null, true);
-
getAbsoluteOpacity()
-
get absolute opacity
- Inherited From:
- 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:
- 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:
- 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:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get absolute scale x var scaleX = node.getAbsoluteScale().x;
-
getAbsoluteTransform()
-
get absolute transform of the node which takes into
account its ancestor transforms- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Transform
-
getAbsoluteZIndex()
-
get absolute z-index which takes into account sibling
and ancestor indices- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Integer
-
getAllIntersections(pos)
-
get all shapes that intersect a point. Note: because this method must clear a temporary
canvas and redraw every shape inside the container, it should only be used for special situations
because it performs very poorly. Please use the Konva.Stage#getIntersection method if at all possible
because it performs much better
nodes with listening set to false will not be detectedParameters:
Name Type Description pos
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
- konva.js
Returns:
array of shapes
- Type
- Array
-
getAncestors()
-
get ancestors
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Array
Example
shape.getAncestors().forEach(function(node) { console.log(node.getId()); })
-
getAttr(attr)
-
get attr
Parameters:
Name Type Description attr
String - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Integer | String | Object | Array
Example
var x = node.getAttr('x');
-
getAttrs()
-
get attrs object literal
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
-
getChildren( [filterFunc])
-
returns an array of direct descendant nodes
Parameters:
Name Type Argument Description filterFunc
function <optional>
filter function
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Array
Example
// get all children var children = layer.getChildren(); // get only circles var circles = layer.getChildren(function(node){ return node.getClassName() === 'Circle'; });
-
getClassName()
-
get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
- Inherited From:
- 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:
- 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:
- Source:
- konva.js
Returns:
- Type
- Integer
-
getLayer()
-
get layer ancestor
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Layer
-
getParent()
-
get parent container
- Inherited From:
- 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:
- 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();
-
getStage()
-
get stage ancestor
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Stage
-
getTransform()
-
get transform of the node
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Transform
-
getType()
-
get the node type, which may return Stage, Layer, Group, or Shape
- Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- String
Example
// get globalCompositeOperation var globalCompositeOperation = shape.globalCompositeOperation(); // set globalCompositeOperation shape.globalCompositeOperation('source-in');
-
green(green)
-
get/set filter green value. Use with Konva.Filters.RGB filter.
Parameters:
Name Type Description green
Integer value between 0 and 255
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Integer
-
hasChildren()
-
determine if node has children
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
-
hasName(name)
-
check is node has name
Parameters:
Name Type Description name
String - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
Example
node.name('red'); node.hasName('red'); // return true node.hasName('selected'); // return false node.hasName(''); // return false
-
height(height)
-
get/set height
Parameters:
Name Type Description height
Number - Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
-
hue(hue)
-
get/set hsv hue in degrees. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
Name Type Description hue
Number value between 0 and 359
- Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- String
Example
// get id var name = node.id(); // set id node.id('foo');
-
isAncestorOf(node)
-
determine if node is an ancestor
of descendantParameters:
Name Type Description node
Konva.Node - Inherited From:
- Source:
- konva.js
-
isCached()
-
determine if node is currently cached
- Inherited From:
- 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:
- 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:
- 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:
- 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:
- 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:
- 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:
- Source:
- konva.js
Returns:
- Type
- Integer
-
levels(level)
-
get/set levels. Must be a number between 0 and 1. Use with Konva.Filters.Posterize filter.
Parameters:
Name Type Description level
Number between 0 and 1
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
-
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() methodParameters:
Name Type Description listening
Boolean Can be true, or false. The default is true.
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
Example
// get listening attr var listening = node.listening(); // stop listening for events, remove node and all its children from hit graph node.listening(false); // listen to events according to the parent node.listening(true);
-
luminance(value)
-
get/set hsl luminance. Use with Konva.Filters.HSL filter.
Parameters:
Name Type Description value
Number from -1 to 1
- Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
// move node in x direction by 1px and y direction by 2px node.move({ x: 1, y: 2 });
-
moveDown()
-
move node down
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
-
moveTo(newContainer)
-
move node to another container
Parameters:
Name Type Description newContainer
Container - Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Boolean
-
moveToTop()
-
move node to the top of its siblings
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
-
moveUp()
-
move node up
- Inherited From:
- Source:
- konva.js
Returns:
flag is moved or not
- Type
- Boolean
-
name(name)
-
get/set name.
Parameters:
Name Type Description name
String - Inherited From:
- 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:
- 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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
// remove listener node.off('click'); // remove multiple listeners node.off('click touchstart'); // remove listener by name node.off('click.foo');
-
offsetX(x)
-
get/set offset x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get offset x var offsetX = node.offsetX(); // set offset x node.offsetX(3);
-
offsetY(y)
-
get/set offset y
Parameters:
Name Type Description y
Number - Inherited From:
- 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 andevt
as native browser event.- Inherited From:
- 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 opaqueParameters:
Name Type Description opacity
Object - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get opacity var opacity = node.opacity(); // set opacity node.opacity(0.5);
-
pixelSize(pixelSize)
-
get/set pixel size. Use with Konva.Filters.Pixelate filter.
Parameters:
Name Type Description pixelSize
Integer - Inherited From:
- 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:
- 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 falseParameters:
Name Type Description preventDefault
Boolean - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
Example
// get preventDefault var shouldPrevent = shape.preventDefault(); // set preventDefault shape.preventDefault(false);
-
red(red)
-
get/set filter red value. Use with Konva.Filters.RGB filter.
Parameters:
Name Type Description red
Integer value between 0 and 255
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Integer
-
remove()
-
remove a node from parent, but don't destroy. You can reuse the node later.
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
node.remove();
-
removeChildren()
-
remove all children. Children will be still in memory.
If you want to completely destroy all children please use "destroyChildren" method instead- Inherited From:
- Source:
- konva.js
-
removeName(name)
-
remove name from node
Parameters:
Name Type Description name
String - Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
-
rotation(rotation)
-
get/set rotation in degrees
Parameters:
Name Type Description rotation
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get rotation in degrees var rotation = node.rotation(); // set rotation in degrees node.rotation(45);
-
saturation(saturation)
-
get/set hsv saturation. Use with Konva.Filters.HSV or Konva.Filters.HSL filter.
Parameters:
Name Type Description saturation
Number 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
-
scale(scale)
-
get/set scale
Parameters:
Name Type Description scale
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get scale var scale = node.scale(); // set scale shape.scale({ x: 2, y: 3 });
-
scaleX(x)
-
get/set scale x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get scale x var scaleX = node.scaleX(); // set scale x node.scaleX(2);
-
scaleY(y)
-
get/set scale y
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get scale y var scaleY = node.scaleY(); // set scale y node.scaleY(2);
-
setAttr(attr, val)
-
set attr
Parameters:
Name Type Description attr
String val
* - Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
Example
node.setAttrs({ x: 5, fill: 'red' });
-
show()
-
show node. set visible = true
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Konva.Node
-
size(size)
-
get/set node size
Parameters:
Name Type Description size
Object Properties
Name Type Description width
Number height
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get node size var size = node.size(); var width = size.width; var height = size.height; // set size node.size({ width: 100, height: 200 });
-
skew(skew)
-
get/set skew
Parameters:
Name Type Description skew
Object Properties
Name Type Description x
Number y
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get skew var skew = node.skew(); // set skew node.skew({ x: 20, y: 10 });
-
skewX(x)
-
get/set skew x
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get skew x var skewX = node.skewX(); // set skew x node.skewX(3);
-
skewY(y)
-
get/set skew y
Parameters:
Name Type Description y
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get skew y var skewY = node.skewY(); // set skew y node.skewY(3);
-
startDrag()
-
initiate drag and drop.
- Inherited From:
- Source:
- konva.js
-
stopDrag()
-
stop drag and drop
- Inherited From:
- Source:
- konva.js
-
threshold(threshold)
-
get/set threshold. Must be a value between 0 and 1. Use with Konva.Filters.Threshold or Konva.Filters.Mask filter.
Parameters:
Name Type Description threshold
Number - Inherited From:
- 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:
- 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:
- 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:
- 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 defaultx
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 qualitypixelRatio
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:
- 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 redrawnParameters:
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 defaultx
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 qualitypixelRatio
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:
- 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:
- Source:
- konva.js
Returns:
- Type
- String
-
toObject()
-
convert Node into an object for serialization. Returns an object.
- Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
-
transformsEnabled(enabled)
-
get/set transforms that are enabled. Can be "all", "none", or "position". The default
is "all"Parameters:
Name Type Description enabled
String - Inherited From:
- Source:
- konva.js
Returns:
- Type
- String
Example
// enable position transform only to improve draw performance node.transformsEnabled('position'); // enable all transforms node.transformsEnabled('all');
-
value(value)
-
get/set hsv value. Use with Konva.Filters.HSV filter.
Parameters:
Name Type Description value
Number 0 is no change, -1.0 halves the value, 1.0 doubles, etc..
- Inherited From:
- 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() methodParameters:
Name Type Description visible
Boolean - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Boolean
Example
// get visible attr var visible = node.visible(); // make invisible node.visible(false); // make visible (according to the parent) node.visible(true);
-
width(width)
-
get/set width
Parameters:
Name Type Description width
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get width var width = node.width(); // set width node.width(100);
-
x(x)
-
get/set x position
Parameters:
Name Type Description x
Number - Inherited From:
- Source:
- konva.js
Returns:
- Type
- Object
Example
// get x var x = node.x(); // set x node.x(5);
-
y(y)
-
get/set y position
Parameters:
Name Type Description y
Number - Inherited From:
- 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:
- Source:
- konva.js
Returns:
- Type
- Number
Example
// get index var index = node.zIndex(); // set index node.zIndex(2);