Safari Cropping Bug with Filters

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<button id="toggle-filter">Toggle Filter</button>
<canvas id="c" width="500" height="400" class="c"></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

var canvas = new fabric.Canvas('c');
var imageSrc = "http://fabricjs.com/assets/dragon.jpg";
var obj;

fabric.Image.fromURL(imageSrc, function(img) {
  obj = img.set({
    left: 40,
    scaleX: 0.18,
    scaleY: 0.18,
    top: 40,
    strokeWidth: 0,
    cropX: 50
  });
  canvas.add(img);
}, { crossOrigin: 'anonymous' });

$('#toggle-filter').on('click', function() {
  
  obj.filters[0] = !obj.filters[0] ? new fabric.Image.filters.Grayscale() : null;
  obj.applyFilters();
  canvas.renderAll();
});