KineticJS grouping images

I'm trying to group images using KineticJS. I'm very new to this and what I'm trying to achieve is one background layer with a black rectangle and another one which contains an image that is a child (node?) of a group. When I add the x and y values to the group, the image seems to ignore the change.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Canvas</title>
<style>

body {
        margin: 0px;
        padding: 0px;
}

#container {
    background-color:#FFFFFF;
    margin: 0px;
    padding: 0px;
}
</style>


</head>


<body bgcolor="#999999">
    <div id="container"></div>

    <script src="kinetic-v5.0.1.min.js"></script>
    <script defer="defer">

   var stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,  
        height: window.innerHeight
      });

        var layer1 = new Kinetic.Layer();

        var bg = new Kinetic.Rect({
            x:0,
            y:0,
            width:(window.innerWidth / 100) * 99,
            height:(window.innerHeight / 100) * 99,
            fill: 'black'
        });




      layer1.add(bg);

      stage.add(layer1);


var layer2 = new Kinetic.Layer();   



var group = new Kinetic.Group({
    x: 10,
    y: 15,
 layer2.add(group);

This has no effect

        id:"group1"
      });
     layer2.add(group);     

      var tshirtS = new Image();
      tshirtS.onload = function() {
        var tshirtSk = new Kinetic.Image({
          x: 10,
          y: 15,
          image: tshirtS,
          width: 106,
          height: 118
        });

        group.add(tshirtSk);
        layer2.add(tshirtSk);
        stage.add(layer2);
      };
      tshirtS.src = 'tshirt-small.png';



    </script>
</body>
</html>

Solution

There was a missing draw function on the group. This works:

        group.add(tshirtSk);
        group.draw();