JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/kineticjs/5.1.0/kinetic.min.js"></script>
<div id="container"></div>
<img src="http://i.imgur.com/kCYeyxx.png" width="600" height="222" id="clipping_mask"/>
<img src="http://i.imgur.com/7TPfx2F.jpg?1" width="500" height="313" id="main_image" />

CSS

html{
    background:lightgray;
}
#container{
    display:inline-block;
    background:#fff;
}
#clipping_mask, #main_image{
    display:none;
}
}

JavaScript

var clipping_mask = document.getElementById("clipping_mask"),
    main_image = document.getElementById("main_image");

var stage = new Kinetic.Stage({
    container:"container",
    width:500,
    height:300
});

var layer = new Kinetic.Layer();
stage.add(layer);

var shape = new Kinetic.Shape({
    drawFunc:function(ctx){
        ctx.drawImage(clipping_mask,0,0);
        ctx.setAttr('globalCompositeOperation',"source-in");
        ctx.drawImage(main_image,0,0);
    },
    hitFunc : function(ctx){
        ctx.rect(0,0, main_image.width, main_image.height);
        ctx.fillStrokeShape(this);
    },
    draggable:true
});
layer.add(shape);
layer.draw();