Canvas Draw Image issue on firefox, works well in chrome

Question

I will assume this is some sort of compatibility issue. Everything works perfectly in chrome, but in firefox the simply doesn\'t draw anything.

Answer 1

Your problem is that the image your are trying to draw are svg images, and that these svg documents have relative width and height attributes.

The browser can't set a height nor a width to the image it has to draw, and hence it can't render it to the canvas. (It is able to do an estimation in the document, since it can be relative to something, but not in the canvas).

So the solution is to set absolute width and height attributes in your svg files,

Or, more complicated, to first draw it into an