HTML5 Canvas Special Stage Events Konva

All events are started from Shapes. So if you click on an empty space within a canvas, a click event will not trigger on Layer BUT it will trigger on the Stage object instead.

In some cases you may want to listen special “content” events. These 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()));