Currently, I am using fabric.js to manipulate images that are added to my canvas. The issue I am facing is with the shadow around the image not being even. The code I have tried so far is displayed below, but you can view what I am aiming for by clicking here. Can someone please help me figure out what mistake I might be making that is causing the shadow to not display correctly?
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(f) {
var data = f.target.result;
fabric.Image.fromURL(data, function(img) {
//create shadow
var shadow = {
color: 'rgba(0,0,0,0.6)',
blur: 20,
offsetX: 0,
offsetY: 0,
opacity: 0.6,
fillShadow: true,
strokeShadow: true
}
var oImg = img.set({
left: 0,
top: 0,
angle: 0,
stroke: '#222',
strokeWidth: 40
}).scale(0.2);
oImg.setShadow(shadow);
canvas.add(oImg).renderAll();
var dataURL = canvas.toDataURL({
format: 'png',
quality: 1
});
});
};
reader.readAsDataURL(file);
});
oImg.setShadow(shadow);canvas {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<br />
<br>
<canvas id="canvas" width="200" height="200"></canvas>