HTML5 Canvas Remove Event Listener with Konva

To remove an event listener with Konva, we can use the off() method of
a shape object which requires an event type such as click or mousedown.

Instructions: Click on the circle to see an alert triggered from the onclick
event binding. Remove the event listener by clicking on the button and again
click on the circle to observe that the event binding has been removed.

Konva Remove_Event Demoview raw

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

      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <div id="buttons">
      <button id="removeClick">Remove onclick</button>
    </div>
    <script>
      function writeMessage(message) {
        text.text(message);
      }

      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,
      });

      circle.on('click', function () {
        alert('You clicked on the circle');
      });

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

      document.getElementById('removeClick').addEventListener(
        'click',
        function () {
          circle.off('click');
          alert('onclick removed');
        },
        false
      );
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.