javascript - kineticjsの透明レイヤーにパターンを適用する方法は?

Question

私はkineticjsを使用して透明レイヤーにパターン（つまり画像）を適用しようとしています.しかし、それは正方形のようなパターンを適用しています。私のコード、それを成し遂げる方法。

<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);

    });

}

これがスクリーンショットです（私の結果）：http://i.stack.imgur.com/u3wWx.png

期待される結果は次のようなものです: http://i.stack.imgur.com/0oFGU.png