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>

<img id="test">

CSS

#test {
    padding: 10px;
    border: 1px solid blue;
}

JavaScript

console.clear();

var testImage = document.getElementById("test");
var imageObj = new Image(),
img = null;

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

imageObj.onload = function() {
    console.log("load");
    
    
    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 = load2;
    
    testImage.src = img.getImage().src;
};
imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";      

var load2 = function() {
    console.log("load2");
   
    
    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();
};

/*
setTimeout(function () {
    var l = new Kinetic.Layer()
    ,   clone = img.clone()
    ;
    clone.setPosition({ x:0, y:0 })
    clone.offset({ x:0, y:0...