HTML5 Canvas Shape Groups

To group multiple shapes together with Konva, we can instantiate
a Konva.Group() object and then add shapes to it with the add() method.
Grouping shapes together is really handy when we want to transform multiple
shapes together, e.g. if we want to move, rotate, or scale multiple shapes
at once. Groups can also be added to other groups to create more complex
Node trees. For a full list of attributes and methods, check out the Konva.Group documentation.

Konva Groups Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Groups Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></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();

      /*
       * create a group which will be used to combine
       * multiple simple shapes.  Transforming the group will
       * transform all of the simple shapes together as
       * one unit
       */
      var group = new Konva.Group({
        x: 120,
        y: 40,
        rotation: 20,
      });

      var colors = ['red', 'orange', 'yellow'];

      for (var i = 0; i < 3; i++) {
        var box = new Konva.Rect({
          x: i * 30,
          y: i * 18,
          width: 100,
          height: 50,
          name: colors[i],
          fill: colors[i],
          stroke: 'black',
          strokeWidth: 4,
        });

        group.add(box);
      }

      layer.add(group);
      stage.add(layer);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.