HTML5 Canvas Drawing Multiple PNG images with transparency

Question

I have an html5 page with multiple png images on it that have transparent backgrounds. I am trying to draw them all on a single canvas object and maintain the transparency between them. I keep getting them drawn where they should be, but with a black background. The images are already loaded on the page, so it is not an onLoad issue. I am using the clearRect method on the canvas before I loop through my images. Here is the loop I am running to draw the images. (The lines to get left, top, width and height are all working as desired. The issue is with the drawImage line.) Images is a collection of img elements on the page with images visible.

            for (i = 0; i < Images.length; i++) {
                imgTop = parseInt(Images[i].style.top) - Top;
                imgLeft = parseInt(Images[i].style.left) - Left;
                imgWidth = parseInt(Images[i].style.width);
                imgHeight = parseInt(Images[i].style.height);
                ctx.drawImage(Images[i], imgLeft, imgTop, imgWidth, imgHeight);
            }

To clarify, are you getting an opaque black background where you're expecting transparency on each image? Are you using .getImageData & .putImageData to modify the images? — markE

OctagonCoder OctagonCoder · Accepted Answer · 2014-10-26T21:49:39

I found the error of my ways. It had nothing to do with the code I posted. When I was done creating the canvas, I was using toDataURL with the parameter to create a jpeg rather than a png. When I changed to PNG it worked as desired.

HTML5 Canvas Drawing Multiple PNG images with transparency

1 Answers