I have developed a CANVAS area in which few HTML elements are rendering as SVG data. It was working perfect before firefox new updated version. Now, after this recent update only CSS background images are rendering. Inline images through img tag is showing nothing.
I can't use css background images because, of some limitations. I have to show colors in background and some PNG images on upper layer through higher z-index and position:absolute properties. So, that it will feel like color drawing in transparent area.
Updated - Sample code -
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;background-color:#0f0'>" +
"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
"<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' width='150' height='150'/></div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0, 200,200);
DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>
