how to apply pattern on transparent layer in kineticjs?

Question

I am trying to apply pattern(i.e image) on transparent layer using kineticjs.But it is applying pattern like square.it should not be square as well it should be merged with top layer because shadow effect is there on the top layer.Here is my code, How to get it done.

<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="kinetic-v5.1.0.min.js"></script>

var bottom_left_mask=new Image();
var pattern=new Image();
bottom_left_mask.src="cuffR.png";
pattern.src="Sea-blue.png";
bottom_left_mask.onload = pattern.onload = loader;

  function loader(){
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 362,
      height: 814
    });

  var layer = new Kinetic.Layer();
  var yoda = new Kinetic.Image({
      x: 0,
      y: 0,
      image: main_img,
      width: 362,
      height: 814
  });

  layer.add(yoda);
  stage.add(layer);

  var topLeftHand=new Kinetic.Image({
      x: 35,
      y: 424,
      image: bottom_left_mask,
      width: 26,
      height: 25,
      id:'ss'
  });

  layer.add(topLeftHand);
  stage.add(layer);

    //body layer

    var bodyLayer=new Kinetic.Image({
      x: 53,
      y: 50,
      image: body_mask,
      width: 243,
      height: 725,
      id:'ss'
    });



    layer.add(bodyLayer);
    stage.add(layer);

    bodyLayer.on('click',function(e){



      this.fillPatternImage(pattern);
      this.fillPatternOffset({x:0, y:0});
      layer.draw();

      this.getContext()._context.globalCompositeOperation = "source-atop";
      layer.getContext()._context.globalCompositeOperation = "destination-atop";

      layer.add(bodyLayer);
      stage.add(layer);

    });

}

here is screenshot (my result):https://i.stack.imgur.com/u3wWx.png

expecting result is likethis: https://i.stack.imgur.com/0oFGU.png