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();
stage.add(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);


    img.cache({
        x: -(img.getWidth() / 2),
        y: -(img.getHeight() / 2),
        width: img.getWidth(),
        height: img.getHeight()
    });

    img.filters([Kinetic.Filters.Invert]);

    go();
    
    img.stroke("red");
    layer.draw();
};
imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";

var done = false;
var go = function () {
    if (!done) {
        done = true;
 
        img.attrs['image'].src =     img._cache.canvas.scene.toDataURL();
        
        img.clearCache();
   //     layer.draw();
        
    }
}