JSFiddle - React, Tailwind, and code Playground

HTML

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

<h1>Kinetic Version:</h1>
<div id="canvas"></div>

<h1>Img src Version:</h1>
<div id="image">
    <img src="http://i.imgbox.com/vMfjLbnw.jpg" width="250" height="188"/>
    
</div>

JavaScript

// Define Stage
    var stage = new Kinetic.Stage({
        container: "canvas",
        width: 300,
        height: 200
    });

    //Define Layer for Images
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // Draw Image Function
    function drawImage(image,w,h,x,y) {
        // Define Function's Image Properties
        var theImage = new Kinetic.Shape({
            sceneFunc: function(context) {
                /// step 1
                var oc = document.createElement('canvas'),
                    octx = oc.getContext('2d');
                oc.width = image.width * 0.5;
                oc.height = image.height * 0.5;
                octx.drawImage(image, 0,0, oc.width,oc.height);

                /// step 2
                octx.drawImage(oc,0,0,oc.width * 0.5,oc.height * 0.5);



                context.drawImage(oc,0,0,oc.width * 0.5, oc.height * 0.5,
                                 0,0,w,h);
            }
        });

        // Add Function's Image to Layer
        layer.add(theImage);
        layer.draw();
    }

    // Define Image 1 and Draw on Load
    var image1 = new Image();
    image1.onload = function() {
        drawImage( this, 250, 188, 0, 0);
    };
    image1.src = "http://i.imgbox.com/vMfjLbnw.jpg";