Canvas image not showing in IE10 and below
I don't know what I'm doing wrong here, but apparently I somehow upset IE10. I have some FabricJS that looks simple enough. It works in everything except IE10 and below. Not sure why?
var canvas = new fabric.Canvas('imageCanvas', {
backgroundColor: 'rgb(240,240,240)'
});
var imgElement = document.getElementById('imageSource');
var fabricImg = new fabric.Image(
imgElement, {
selectable: false,
evented: false,
hasControls: false,
hasBorders: false
}
);
canvas.add(fabricImg);
Screenshot from IE10 (left) and IE11 (right):
Demo (open in <IE11 to see the problem): https://jsfiddle.net/8fy3rv04/
I've changed every option I could think of and looked at the FabricJS documentation for fabric.Image
, but I don't see where I could do anything to piss off IE. Pulling my hair out now!
source to share
The answer was a simple bit of CSS marked imageSource
as display:none
. It was helpful to load the image into a hidden element <img>
and then put it on the canvas, but instead I had to load the image via fabric.Image.fromURL
.
Very strange issue for IE10 which meant it <img>
was hidden, so was the image when it was placed on the canvas! Bizarre.
source to share