Shadow bug on flipped image
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<canvas id="c" width="500" height="400" class="c"></canvas>
CSS
canvas {
border: 1px solid grey;
}
JavaScript
var canvas = document.getElementById('c')
var imageSrc = "http://fabricjs.com/assets/dragon.jpg";
var img = document.createElement('img');
img.onload = function() {
var ctx = canvas.getContext('2d');
// comment this line below to solve the problem
ctx.transform(-1, 0, 0, 1, 400, 0);
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 10;
ctx.shadowColor = 'black';
ctx.drawImage(img, 10, 10, 380, 210);
}
img.src = imageSrc;