JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.0/fabric.min.js"></script>
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="c" width="600" height="600"></canvas>

JavaScript

var canvas = window._canvas = new fabric.Canvas('c', {
  width: 1000,
  height: 1000
});

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

var imgInstance;

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function(event) {
    var img = new Image();
    img.src = event.target.result;
    img.onload = function() {
      imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
      });
      imgInstance.scaleToWidth(200);
      imgInstance.scaleToHeight(200);

      new fabric.Image.fromURL("http://demo.forprintshop.com/images/common/Shape1.png", function(img) {        
        var filter = new fabric.Image.filters.BlendImage({
          image: img,
          mode: 'mask',
          alpha: 0.5
        });
        imgInstance.filters.push(filter);
        imgInstance.applyFilters();
        canvas.add(imgInstance);
      }, {
        crossOrigin: 'anonymous'
      });
    };
  };
  reader.readAsDataURL(e.target.files[0]);
}