Fabric JS Image Shadow on Chrome
shadows on images rendered to canvas have the ability to blur in any browser, except Chrome. Any fix for this?
by codert
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
Shadows on transparent PNGs will blur for FireFox, IE & Safari, but not in Chrome.
<br>
<canvas id="testcanvas" width="500" height="570"></canvas>
<input type="range" min="1" max="10" onchange="changeOffsetX">
CSS
body {
font-family: arial,helvetica;
}
#testcanvas {
border: 3px solid #990000;
}
JavaScript
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'http://ad-factory.s3.amazonaws.com/shirt-test.png';
img.onload = function () {
var canvas = new fabric.Canvas('testcanvas', {
skipTargetFind: true
});
var imgElement = document.getElementById('testimage');
var imgInstance = new fabric.Image(img, {
crossOrigin: 'anonymous',
left: 10,
top: 10,
angle: 0
});
imgInstance.lockUniScaling = true;
imgInstance.setShadow({
blur: 10,
color: 'rgba(0,0,0,0.5)',
offsetX: 10,
offsetX: 5
});
canvas.add(imgInstance);
window.imgInstance = imgInstance;
window.canvas = canvas;
};
window.changeOffsetX =function() {
console.log(imgInstance.shadow);
}