JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var imageObj = new Image();
      imageObj.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 600,
          height: 700
        });
        var layer = new Kinetic.Layer();
        img = new Kinetic.Image({
          x: 250,
          y: 200,
          image: imageObj,
          draggable: true
        });
        img.clearCache();
        img.setOffsetX(img.getWidth() / 2); 
        img.setOffsetY(img.getHeight() / 2); 
        img.stroke("green");  
        
        var strokeWidthValue = 10;
          
        img.strokeWidth(strokeWidthValue);
        img.strokeScaleEnabled(false);  
        img.strokeEnabled(true);  
          
        layer.add(img);
        stage.add(layer);
        
        img.cache({
            x: -(img.getWidth() / 2) - strokeWidthValue,
            y: -(img.getHeight() / 2) - strokeWidthValue,
            width: img.getWidth() + (strokeWidthValue * 2),
            height: img.getHeight() + (strokeWidthValue * 2)
        });
          

        img.filters([Kinetic.Filters.Invert]);
        layer.draw();
          
          console.log("type: "+img.getType());  
      };
       imageObj.crossOrigin = "anonymous";
      imageObj.src =
  "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";