HTML5 Canvas Select Shape by Type Tutorial

To select shapes by type with Konva, we can use the find() method with the name of the type or class name.
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 Type 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 Type 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
      });

      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
      });
      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('Rect');

          // 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>