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.

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.forEach(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>

Enjoying Konva? Please consider to support the project.