HTML5 Canvas Select Shape by id Tutorial

To select a shape by id with Konva, we can use the find() method using the # selector.
The find() method always returns an array of elements, even if we are expecting it to return one element.
if you need only one element you can use findOne() method.
The find() method works for any node, including the stage, layers, groups, and shapes.

Instructions: press the “Activate Rectangle” button to select the rectangle by id and perform a transition. You can also drag and drop the rectangle.

Konva Select Shape by id Demoview raw

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

      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }

      #buttons > input {
        padding: 10px;
        display: block;
        margin-top: 5px;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <div id="buttons">
      <input type="button" id="activate" value="Activate rectangle" />
    </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();
      for (var n = 0; n < 10; n++) {
        var circle = new Konva.Circle({
          x: Math.random() * stage.width(),
          y: Math.random() * stage.height(),
          radius: Math.random() * 50 + 25,
          fill: 'red',
          strokeWidth: 3,
          stroke: 'black',
        });

        layer.add(circle);
      }

      var rect = new Konva.Rect({
        x: 300,
        y: 90,
        width: 100,
        height: 50,
        fill: 'green',
        strokeWidth: 3,
        offset: {
          x: 50,
          y: 25,
        },
        draggable: true,
        id: 'myRect',
      });

      layer.add(rect);
      stage.add(layer);

      var tween;

      document.getElementById('activate').addEventListener(
        'click',
        function () {
          // or var shape = stage.findOne('#myRect');
          var shape = stage.find('#myRect')[0];

          if (tween) {
            tween.destroy();
          }

          tween = new Konva.Tween({
            node: shape,
            duration: 1,
            scaleX: Math.random() * 2,
            scaleY: Math.random() * 2,
            easing: Konva.Easings.ElasticEaseOut,
          }).play();
        },
        false
      );
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.