Safari Shadow Bug on Cropped Images

by Steve Eberhardt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="250" class="c"></canvas>
<button id="toggle-crop">
  Toggle Cropping
</button>

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;
  img.set({
    left: 10,
    scaleX: 0.18,
    scaleY: 0.18,
    top: 10,
    width: 1920,
    height: 1200
  });
  img.setShadow({
    color: 'rgba(0,0,0,0.3)',
    offsetX: 40,
    offsetY: 40,
    blur: 0
  });
  img.resizeFilter = new fabric.Image.filters.Resize({
    resizeType: 'lanczos'
  });
  img.applyResizeFilters();
  canvas.add(img);
}, {
  crossOrigin: 'anonymous'
});

$('#toggle-crop').on('click', function(){
	if(obj.width == 1920) {
  	obj.set('width', 1700);
  } else {
  	obj.set('width', 1920);
  }
  canvas.renderAll();
});