Layer

new Konva.Layer(config)

Layer constructor. Layers are tied to their own canvas element and are used to contain groups or shapes.

Parameters

Name	Type	Description
config	Object
clearBeforeDraw (optional)	Boolean	set this property to false if you don't want to clear the canvas before each layer draw. The default value is true.
x (optional)	Number
y (optional)	Number
width (optional)	Number
height (optional)	Number
visible (optional)	Boolean
listening (optional)	Boolean	whether or not the node is listening for events
id (optional)	String	unique id
name (optional)	String	non-unique name
opacity (optional)	Number	determines node opacity. Can be any number between 0 and 1
scale (optional)	Object	set scale
scaleX (optional)	Number	set scale x
scaleY (optional)	Number	set scale y
rotation (optional)	Number	rotation in degrees
offset (optional)	Object	offset from center point and rotation point
offsetX (optional)	Number	set offset x
offsetY (optional)	Number	set offset y
draggable (optional)	Boolean	makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance (optional)	Number
dragBoundFunc (optional)	function	* @param {Object} [config.clip] set clip
clipX (optional)	Number	set clip x
clipY (optional)	Number	set clip y
clipWidth (optional)	Number	set clip width
clipHeight (optional)	Number	set clip height
clipFunc (optional)	function	set clip func

Inherited from: Konva.Container

Own Methods

getCanvas()

get layer canvas wrapper

getNativeCanvasElement()

get native canvas element

getHitCanvas()

get layer hit canvas

getContext()

get layer canvas context

width()

get/set width of layer. getter return width of stage. setter doing nothing. if you want change width use stage.width(value);

Returns: Number

Example:

var width = layer.width();

height()

get/set height of layer.getter return height of stage. setter doing nothing. if you want change height use stage.height(value);

Returns: Number

Example:

var height = layer.height();

batchDraw()

batch draw. this function will not do immediate draw but it will schedule drawing to next tick (requestAnimFrame)

Returns: Konva.Layer this

getIntersection(pos)

get visible intersection shape. This is the preferred method for determining if a point intersects a shape or not also you may pass optional selector parameter to return ancestor of intersected shape nodes with listening set to false will not be detected

Parameters:

• pos (Object)
• pos.x (Number)
• pos.y (Number)

Returns: Konva.Node

Example:

var shape = layer.getIntersection({x: 50, y: 50});

enableHitGraph()

enable hit graph. DEPRECATED! Use layer.listening(true) instead.

Returns: Layer

disableHitGraph()

disable hit graph. DEPRECATED! Use layer.listening(false) instead.

Returns: Layer

toggleHitCanvas()

Show or hide hit canvas over the stage. May be useful for debugging custom hitFunc

imageSmoothingEnabled(imageSmoothingEnabled)

get/set imageSmoothingEnabled flag For more info see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

Parameters:

• imageSmoothingEnabled (Boolean)

Returns: Boolean

Example:

// get imageSmoothingEnabled flag
var imageSmoothingEnabled = layer.imageSmoothingEnabled();

layer.imageSmoothingEnabled(false);

layer.imageSmoothingEnabled(true);

clearBeforeDraw(clearBeforeDraw)

get/set clearBeforeDraw flag which determines if the layer is cleared or not before drawing

Parameters:

• clearBeforeDraw (Boolean)

Returns: Boolean

Example:

// get clearBeforeDraw flag
var clearBeforeDraw = layer.clearBeforeDraw();

// disable clear before draw
layer.clearBeforeDraw(false);

// enable clear before draw
layer.clearBeforeDraw(true);

hitGraphEnabled(enabled)

get/set hitGraphEnabled flag. DEPRECATED! Use layer.listening(false) instead. Disabling the hit graph will greatly increase draw performance because the hit graph will not be redrawn each time the layer is drawn. This, however, also disables mouse/touch event detection

Parameters:

• enabled (Boolean)

Returns: Boolean

Example:

// get hitGraphEnabled flag
var hitGraphEnabled = layer.hitGraphEnabled();

// disable hit graph
layer.hitGraphEnabled(false);

// enable hit graph
layer.hitGraphEnabled(true);

Inherited Methods

Konva.Layer also has all methods of its parent classes. Each link below opens the full documentation of the method on the class that defines it.

From Konva.Container

• getChildren(filterFunc)
• hasChildren()
• removeChildren()
• destroyChildren()
• add(children)
• find(selector)
• findOne(selector)
• isAncestorOf(node)
• getAllIntersections(pos)
• clip(clip)
• clipX(x)
• clipY(y)
• clipWidth(width)
• clipHeight(height)
• clipFunc(function)

From Konva.Node

• clearCache()
• cache(config)
• isCached()
• getClientRect(config)
• off(evtStr)
• remove()
• destroy()
• getAttr(attr)
• getAncestors()
• getAttrs()
• setAttrs(config)
• isListening()
• isVisible()
• show()
• hide()
• getAbsoluteZIndex()
• getDepth()
• getRelativePointerPosition()
• getAbsolutePosition(Ancestor)
• move(change)
• rotate(theta)
• moveToTop()
• moveUp()
• moveDown()
• moveToBottom()
• getAbsoluteOpacity()
• moveTo(newContainer)
• toObject()
• toJSON()
• getParent()
• findAncestors(selector, includeSelf, stopNode)
• findAncestor(selector, includeSelf, stopNode)
• getLayer()
• getStage()
• fire(eventType, evt, bubble)
• getAbsoluteTransform()
• getAbsoluteScale()
• getAbsoluteRotation()
• getTransform()
• clone(obj)
• toCanvas(config)
• toDataURL(config)
• toImage(config)
• toBlob(config)
• getClassName()
• getType()
• addName(name)
• hasName(name)
• removeName(name)
• setAttr(attr, val)
• draw()
• startDrag()
• stopDrag()
• isDragging()
• isClientRectOnScreen(margin)
• zIndex(index)
• absolutePosition(pos)
• position(pos)
• x(x)
• y(y)
• globalCompositeOperation(type)
• opacity(opacity)
• name(name)
• id(id)
• rotation(rotation)
• scale(scale)
• scaleX(x)
• scaleY(y)
• skew(skew)
• skewX(x)
• skewY(y)
• offsetX(x)
• offsetY(y)
• dragDistance(distance)
• listening(listening)
• preventDefault(preventDefault)
• filters(filters)
• visible(visible)
• transformsEnabled(enabled)
• size(size)
• dragBoundFunc(dragBoundFunc)
• draggable(draggable)
• to(params)
• blurRadius(radius)
• brightness(brightness)
• contrast(contrast)
• embossStrength(level)
• embossWhiteLevel(embossWhiteLevel)
• embossDirection(embossDirection)
• embossBlend(embossBlend)
• enhance(amount)
• hue(hue)
• saturation(saturation)
• luminance(value)
• value(value)
• kaleidoscopePower(power)
• kaleidoscopeAngle(degrees)
• noise(noise)
• pixelSize(pixelSize)
• levels(level)
• red(red)
• green(green)
• blue(blue)
• alpha(alpha)
• threshold(threshold)