javascript - 他のレイヤーで画像をトリミング

Question

私はkineticjsステージに2つのレイヤーを持っています.それらの1つは他の画像への境界線です.境界線で画像をトリミングし、最後の画像に境界線を持たないようにします.jsfiddleの例が添付されています.内側の画像のみを保持したい(バックパック)

var scale = 1;
var origwidth = 280;
var origheight = 302;
var ratio = origwidth/origheight;
var newwidth = 300;
var newheight = newwidth/ratio;
var stage = new Kinetic.Stage({
    container: 'photouploaded',
    width: newwidth,
    height: newheight
  });
  var uploaded;
  var mask;
  var layer = new Kinetic.Layer();
  var mlayer = new Kinetic.Layer();
  var imageObj = new Image();
  var maskObj = new Image();
  mask = new Kinetic.Image({
      x: 0,
      y: 0,
      image: maskObj,
      width: newwidth,
      height: newheight,
      listening: false
    });
   uploaded = new Kinetic.Image({
      x: (mask.attrs.width / 2) + 15,
      y: (mask.attrs.height / 2) + 15,
      image: imageObj,
      width: 270,
      height: 270,
      offset: [135,135],
      draggable: true
    });
  imageObj.onload = function() {
    layer.add(uploaded);
    mlayer.add(mask);
    stage.add(layer);
    stage.add(mlayer);  
  };
  imageObj.src = 'base64 of photo';
  maskObj.src = 'base64 of photo';

jsfiddle