HTML5 Canvas Move Shape to Another Container Tutorial

To move a shape from one container into another with Konva, we can use the
moveTo() method which requires a container as a parameter.
A container can be another stage, a layer, or a group. You can also move groups
into other groups and layers, or shapes from groups directly into other layers.

Instructions: Drag and drop the groups and observe that the red rectangle is
bound to either the yellow group or the blue group.
Use the buttons on the left to move the box from one group into another.

Konva Move Shape to Another Container Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Move Shape to Another Container Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
      #buttons {
        position: absolute;
        left: 10px;
        top: 0;
      }
      button {
        margin-top: 10px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <button id="toBlue">Move red box to blue group</button>
      <button id="toYellow">Move red box to yellow group</button>
    </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();
      var yellowGroup = new Konva.Group({
        x: 100,
        y: 100,
        draggable: true,
      });
      var blueGroup = new Konva.Group({
        x: 300,
        y: 80,
        draggable: true,
      });

      var box = new Konva.Rect({
        x: 10,
        y: 10,
        width: 100,
        height: 50,
        fill: 'red',
        stroke: 'black',
      });

      var yellowCircle = new Konva.Circle({
        x: 0,
        y: 0,
        radius: 50,
        fill: 'yellow',
        stroke: 'black',
      });

      var blueCircle = new Konva.Circle({
        x: 0,
        y: 0,
        radius: 50,
        fill: 'blue',
        stroke: 'black',
      });

      // build node tree
      yellowGroup.add(yellowCircle);
      yellowGroup.add(box);
      blueGroup.add(blueCircle);
      layer.add(yellowGroup);
      layer.add(blueGroup);
      stage.add(layer);

      // add button event bindings
      document.getElementById('toBlue').addEventListener(
        'click',
        function () {
          box.moveTo(blueGroup);
        },
        false
      );

      document.getElementById('toYellow').addEventListener(
        'click',
        function () {
          box.moveTo(yellowGroup);
        },
        false
      );
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.