JSFiddle - React, Tailwind, and code Playground

by confile

HTML

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

CSS

#container {
    display: inline-block;
    border: 2px solid red;
}

JavaScript

var stage = new Kinetic.Stage({
        container: 'container',
        width: 300,
        height: 400,
      });

var layer = new Kinetic.Layer();

console.log("stage.width() "+stage.width());

var rect = new Kinetic.Rect({
        width: stage.width(),
        height: stage.height(),
        fill: 'yellow'
      });

layer.add(rect);
stage.add(layer);

var imageObj = new Image();
imageObj.onload = function() {
    var kimage = new Kinetic.Image({
        image: imageObj
    });

    var imageRatio = kimage.width() / kimage.height();
    
      
    kimage.width(stage.width());
    kimage.height(stage.height() / imageRatio);
    
    // add the shape to the layer
    layer.add(kimage);
    
    // add the layer to the stage
    layer.draw();
};


$("#inputFile").on("change", function() {
    
    var inputFile = $("#inputFile")[0];
    var files = inputFile.files;
    
    if (!files || !files.length) 
    		return

	var myFile = files[0];
    
    imageObj.src = URL.createObjectURL(myFile);
});