JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>

CSS

canvas {
    border: 1px solid #999;
}
img {
    display: none;
}
.canvas-container {
    margin-bottom: 10px;
}

JavaScript

var canvas = window._canvas = new fabric.Canvas('c');


var img = new Image();
img.src = event.target.result;
img.onload = function() {
  var imgInstance = new fabric.Image(img, {
    // If i put it here, it doesnt work
    scaleY: canvas.height / img.width,
    scaleX: canvas.width / img.width
  });
  var filter = new fabric.Image.filters.Brownie();
  imgInstance.filters.push(filter);
  imgInstance.applyFilters();
  canvas.add(imgInstance.set({
    left: 0,
    top: 0,
    angle: 0
  }));
}
img.crossOrigin = 'anonymous';
img.src = 'https://image.ibb.co/ecNdBU/gear.jpg';