JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="rectangle" width="637" height="412"></canvas>

CSS

canvas {
  border: 1px solid #808080;
  border-radius: 1px;
}

#rectangle1 {
  background: url(http://i.imgur.com/0Mt6ho1.png);
  background-size: contain;
  background-repeat: no-repeat;
}

JavaScript

var id = document.getElementById('rectangle') && rectangle ||
  document.getElementById('anotherCanvas') && anotherCanvas;
var canvas = new fabric.Canvas(id);

document.getElementById('file').addEventListener("change", function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function (f) {
        var data = f.target.result;
        fabric.Image.fromURL(data, function (img) {
            var oImg = img.set({
                width: 125,
                height: 170,
                left: 430,
                top: 65
            })
            canvas.add(oImg);
            canvas.setActiveObject(oImg);
						var image = canvas.getActiveObject();
            image.moveTo(-1);
            canvas.discardActiveObject();
						canvas.renderAll(); 
        });
    };
    reader.readAsDataURL(file);
});

fabric.Image.fromURL('http://i.imgur.com/0Mt6ho1.png', function (img) {
            var oImg = img.set({
                scaleX: 0.2,
                scaleY: 0.2,
                selectable: false
            })
            canvas.add(oImg).renderAll();
           });