Skip to main content

Stage

new Konva.Stage(config)

Stage constructor. A stage is used to contain multiple layers

Parameters​

NameTypeDescription
configObject
containerString|ElementContainer selector or DOM element
x (optional)Number
y (optional)Number
width (optional)Number
height (optional)Number
visible (optional)Boolean
listening (optional)Booleanwhether or not the node is listening for events
id (optional)Stringunique id
name (optional)Stringnon-unique name
opacity (optional)Numberdetermines node opacity. Can be any number between 0 and 1
scale (optional)Objectset scale
scaleX (optional)Numberset scale x
scaleY (optional)Numberset scale y
rotation (optional)Numberrotation in degrees
offset (optional)Objectoffset from center point and rotation point
offsetX (optional)Numberset offset x
offsetY (optional)Numberset offset y
draggable (optional)Booleanmakes 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

Inherited from: Konva.Container

Own Methods​

_getOwnerWindow()​

The window the stage is rendered in. It is not always the window Konva was imported into: the container may belong to an iframe, or to a window opened with window.open.

setContainer(container)​

set container dom element which contains the stage wrapper div element

Parameters:

  • container (DomElement): can pass in a dom element or id string

clear()​

clear all layers

getPointerPosition()​

returns ABSOLUTE pointer position which can be a touch position or mouse position pointer position doesn't include any transforms (such as scale) of the stage it is just a plain position of pointer relative to top-left corner of the canvas

Returns: Vector2d|null

getIntersection(pos)​

get visible intersection shape. This is the preferred method for determining if a point intersects a shape or not 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 = stage.getIntersection({x: 50, y: 50});

getLayers()​

returns an array of layers

setPointersPositions(evt)​

manually register pointers positions (mouse/touch) in the stage. So you can use stage.getPointerPosition(). Usually you don't need to use that method because all internal events are automatically registered. It may be useful if event is triggered outside of the stage, but you still want to use Konva methods to get pointers position.

Parameters:

  • evt (Object): Event object

Example:

window.addEventListener('mousemove', (e) => {
  stage.setPointersPositions(e);
});

batchDraw()​

batch draw

Returns: Konva.Stage this

container()​

get/set container DOM element. The container may belong to another window than the one Konva was imported into: an iframe, or a window opened with window.open. The stage then uses the events and the frames of that window.

Returns: DomElement container

Example:

// get container
var container = stage.container();
// set container
var container = document.createElement('div');
body.appendChild(container);
stage.container(container);

// a stage in a popout window
var popout = window.open('', '', 'width=600,height=400');
stage.container(popout.document.body);

Inherited Methods​

Konva.Stage 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​

From Konva.Node​