cburgmer/firefoxTransparencyBug.html

## firefoxTransparencyBug.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test case for bug in Firefox where a transparent image is not properly transferred</title>
</head>
<body>
    <script type="text/javascript">
        function loadImage(url, callback) {
            var image = new window.Image();
            image.onload = function() {
                callback(image);
            };
            image.src = url;
        }

        function drawUrlToCanvas(url, canvas, callback) {
            var context = canvas.getContext("2d");

            loadImage(url, function (image) {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(image, 0, 0);

                callback();
            });
        }

        function canvassesAreEqual(canvasA, canvasB) {
            var aData = canvasA.getContext("2d").getImageData(0, 0, canvasA.width, canvasA.height).data,
                bData = canvasB.getContext("2d").getImageData(0, 0, canvasB.width, canvasB.height).data,
                length = aData.length,
                i;

            for (i = length; i--;) {
                if (aData[i] !== bData[i]) {
                    return false;
                }
            }
            return true;
        }

        window.onload = function () {
            var faultyImageUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAJElEQVRIie3OMQ0AAAgDMPy/88qNDEhoFbQKAIC/kvT2AbhpABwYArDgdqnaAAAAAElFTkSuQmCC";

            loadImage(faultyImageUrl, function (img) {
                var originalCanvas = document.createElement("canvas");

                originalCanvas.width = img.width;
                originalCanvas.height = img.height;

                drawUrlToCanvas(
                    faultyImageUrl,
                    originalCanvas,
                    function () {
                        var originalCanvasUrl = originalCanvas.toDataURL("image/png"),
                            reRenderedCanvas = document.createElement("canvas");

                        reRenderedCanvas.width = originalCanvas.width;
                        reRenderedCanvas.height = originalCanvas.height;

                        console.log("Rendered to first canvas: ", originalCanvasUrl);

                        drawUrlToCanvas(originalCanvasUrl, reRenderedCanvas, function () {
                            var reRenderedCanvasUrl = reRenderedCanvas.toDataURL("image/png");
                            console.log("Rendered to second canvas:", reRenderedCanvasUrl);
                            console.log("Canvasses equal?", canvassesAreEqual(originalCanvas, reRenderedCanvas));
                        });
                    });
            });
        };
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Test case for bug in Firefox where a transparent image is not properly transferred</title>
	</head>
	<body>
	<script type="text/javascript">
	function loadImage(url, callback) {
	var image = new window.Image();
	image.onload = function() {
	callback(image);
	};
	image.src = url;
	}

	function drawUrlToCanvas(url, canvas, callback) {
	var context = canvas.getContext("2d");

	loadImage(url, function (image) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.drawImage(image, 0, 0);

	callback();
	});
	}

	function canvassesAreEqual(canvasA, canvasB) {
	var aData = canvasA.getContext("2d").getImageData(0, 0, canvasA.width, canvasA.height).data,
	bData = canvasB.getContext("2d").getImageData(0, 0, canvasB.width, canvasB.height).data,
	length = aData.length,
	i;

	for (i = length; i--;) {
	if (aData[i] !== bData[i]) {
	return false;
	}
	}
	return true;
	}

	window.onload = function () {
	var faultyImageUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAJElEQVRIie3OMQ0AAAgDMPy/88qNDEhoFbQKAIC/kvT2AbhpABwYArDgdqnaAAAAAElFTkSuQmCC";

	loadImage(faultyImageUrl, function (img) {
	var originalCanvas = document.createElement("canvas");

	originalCanvas.width = img.width;
	originalCanvas.height = img.height;

	drawUrlToCanvas(
	faultyImageUrl,
	originalCanvas,
	function () {
	var originalCanvasUrl = originalCanvas.toDataURL("image/png"),
	reRenderedCanvas = document.createElement("canvas");

	reRenderedCanvas.width = originalCanvas.width;
	reRenderedCanvas.height = originalCanvas.height;

	console.log("Rendered to first canvas: ", originalCanvasUrl);

	drawUrlToCanvas(originalCanvasUrl, reRenderedCanvas, function () {
	var reRenderedCanvasUrl = reRenderedCanvas.toDataURL("image/png");
	console.log("Rendered to second canvas:", reRenderedCanvasUrl);
	console.log("Canvasses equal?", canvassesAreEqual(originalCanvas, reRenderedCanvas));
	});
	});
	});
	};
	</script>
	</body>
	</html>