KonvaJs Working with Group

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/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: 0,
      y: 0
    });
    var yoda;

    var rect = new Konva.Rect({
      x: 0,
      y: 0,
      width: width,
      height: height,
      fill: 'green'
    });
    var border = new Konva.Rect({
      x: 0,
      y: 0,
      width: 116,
      height: 128,
      fill: 'grey'
    });

    var imageObj = new Image();
    imageObj.onload = function() {

      yoda = new Konva.Image({
        x: 5,
        y: 5,
        image: imageObj,
        width: 106,
        height: 118
      });

      group.add(border);
      group.add(yoda);
      layer.batchDraw();
    };
    imageObj.src = 'http://konvajs.github.io/assets/yoda.jpg';

    layer.add(rect);

    layer.add(group);
    stage.add(layer);

    stage.on('mousemove', function(e) {
      var point=stage.getPointerPosition();
      //Don't know why this is not puttig the group childern poperly
      group.position(stage.getPointerPosition());
      //yoda.position(point);
      //border.position({
      //  x: point.x-5,
      //  y: point.y-5
      //})
      layer.batchDraw();
    });
  </script>

</body>

</html>

// Code goes here

/* Styles go here */