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 and even no trigger on Stage objects. But if you really need to listen click (or any other similar event) on Konva.Stage on empty space you can:

  1. Create transparent rectange with the same size as Stage and add to to bottom of your shapes.
  2. Or listen special “content” events.

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

Instruction: click everywhere. see console.

Konva Stage Events Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Stage Events Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
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
stage.add(layer);
var circle = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
fill: 'blue',
radius: 30
});
layer.add(circle).draw();
// don't trigger on empty space
stage.on('click', function() {
console.log('usual click on ' + JSON.stringify(stage.getPointerPosition()));
});
// trigger every where
stage.on('contentClick', function() {
console.log('content click on ' + JSON.stringify(stage.getPointerPosition()));
});
</script>
</body>
</html>