JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>

JavaScript

console.clear();

imageObj = new Image()
img = null;

stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 700
    });
layer = new Kinetic.Layer();

imageObj.onload = function() {
    var strokeWidthValue = 10;
    
    img = new Kinetic.Image({
        x: 250,
        y: 200,
        image: this
    });
    
    img.clearCache();
    img.setOffsetX(img.getWidth() / 2); 
    img.setOffsetY(img.getHeight() / 2); 
    img.stroke("green");  
    
    img.strokeWidth(strokeWidthValue);
    img.strokeScaleEnabled(false);  
    img.strokeEnabled(true);  
    
    layer.add(img);
    stage.add(layer);
    
    img.cache({
        x: -(img.getWidth() / 2),
        y: -(img.getHeight() / 2),
        width: img.getWidth(),
        height: img.getHeight()
    });
    
    img.filters([Kinetic.Filters.Invert]);
    layer.draw();
    imageObj.onload = null;
};
imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";      

setTimeout(function () {
    var l = new Kinetic.Layer()
    ,   clone = img.clone()
    ;
    clone.setPosition({ x:0, y:0 })
    clone.offset({ x:0, y:0 })
    l.add(clone);
    
    img.attrs['image'].src = l.toDataURL({
        x: 0,
        y: 0,
        width: img.width(),
        height: img.height()
    });
    img.clearCache();
    layer.draw();
}, 5000);