fabric.js image filters

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/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.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.ColorMatrix({
    matrix: [0.59970, 0.34553, -0.27082, 0, 0.186, -0.03770, 0.86095, 0.15059, 0, -0.1449, 0.24113, -0.07441, 0.44972, 0, -0.02965, 0, 0, 0, 255, 0]
  });
  imgInstance.filters.push(filter);
  imgInstance.applyFilters(function() {
    canvas.add(imgInstance.set({
      left: 0,
      top: 0,
      angle: 0
    }));
  });
};
img.crossOrigin = 'anonymous';
img.src = 'https://image.ibb.co/ecNdBU/gear.jpg';