HTML5 Canvas Special Stage Events Konva

All events are starts from Shapes. So if you click on empty space on canvas click event will no trigger on Layer BUT it will trigger on Stage object.

In some cases you may want to listen special “content” events. This events will be triggered for Stage container interactions (like mouse or touch events).

Supported content events:
contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap, contentDblTap

Konva Stage Events Demoview raw
<!DOCTYPE html>

<script src=""></script>
<meta charset="utf-8">
<title>Konva Stage Events Demo</title>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;

<div id="container"></div>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height

var layer = new Konva.Layer();
// add the layer to the stage

var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'blue',
radius: 30


stage.on('click', function (e) {
// is a clicked Konva.Shape
// if you clicked on empty space = stage
console.log('clicked on',;
console.log('usual click on ' + JSON.stringify(stage.getPointerPosition()));

stage.on('contentClick', function (e) {
// content event has no information about
// so it is undefined
console.log('content click on ' + JSON.stringify(stage.getPointerPosition()));