HTML5 Canvas Fire Event with Konva

To fire events with Konva, we can use the fire() method.
This enables us to programmatically fire events like click, mouseover,
mousemove, etc., and also fire custom events, like foo and bar.

Konva Fire_Events Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Fire Event Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      var layer = new Konva.Layer();

      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 2 + 10,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });

      var text = new Konva.Text({
        text: '',
        fontFamily: 'Calibri',
        fontSize: 24,
        fill: 'black',
        x: 10,
        y: 10,
      });

      circle.on('click', function (evt) {
        text.text('you clicked on the circle!');
      });

      layer.add(circle).add(text);
      stage.add(layer);

      // simulate click on circle
      circle.fire('click');
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.