HTML5 Canvas Select Shape by Name Tutorial

To select shapes by name with Konva, we can use the find() method using the . selector.
The find() method returns an array of nodes that match the selector string.
The return array is a Konva.Collection array, which is basically a typical JavaScript array with a special each() method.
The each() method enables us to quickly iterate through every node in the array.

Konva Select Shape by Name Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Select Shape by Name 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 rect1 = new Konva.Rect({
        x: 250,
        y: 90,
        width: 100,
        height: 50,
        fill: 'green',
        strokeWidth: 3,
        stroke: 'black',
        offset: {
          x: 50,
          y: 25
        },
        draggable: true,
        name: 'rectangle'
      });

      var rect2 = new Konva.Rect({
        x: 70,
        y: 90,
        width: 100,
        height: 50,
        fill: 'green',
        strokeWidth: 3,
        stroke: 'black',
        offset: {
          x: 50,
          y: 25
        },
        draggable: true,
        name: 'rectangle'
      });
      layer.add(rect1);
      layer.add(rect2);
      stage.add(layer);

      var tweens = [];

      document.getElementById('activate').addEventListener(
        'click',
        function() {
          // select shapes by name
          var shapes = stage.find('.rectangle');

          // if there are currently any active tweens, destroy them
          // before creating new ones
          for (var n = 0; n < tweens.length; n++) {
            tweens[n].destroy();
          }

          // apply transition to all nodes in the array
          shapes.each(function(shape) {
            tweens.push(
              new Konva.Tween({
                node: shape,
                duration: 1,
                scaleX: Math.random() * 2,
                scaleY: Math.random() * 2,
                easing: Konva.Easings.ElasticEaseOut
              }).play()
            );
          });
        },
        false
      );
    </script>
  </body>
</html>