Drawing PNG to a canvas element -- not showing transparency

Question

I'm trying to use drawImage to draw a semi-transparent PNG on a canvas element. However, it draws the image as completely opaque. When I look at the resource that's being loaded and load the actual PNG in the browser, it shows the transparency, but when I draw it on the canvas, it does not. Any ideas?

Here's the code:

drawing = new Image() 
drawing.src = "draw.png" 
context.drawImage(drawing,0,0);

Solution 1

Don't forget to add an event listener to the image's load event. Image loading is something that happens in the background, so when the JavaScript interpreter gets to the canvas.drawImage part it is most likely the image probably will not have loaded yet and is just an empty image object, without content.

drawing = new Image();
drawing.src = "draw.png"; // can also be a remote URL e.g. http://
drawing.onload = function() {
   context.drawImage(drawing,0,0);
};

Solution 2

You can simply insert any transparent image using Image object:

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
var image=new Image();
image.onload=function(){
context.drawImage(image,0,0,canvas.width,canvas.height);
};
image.src="http://www.lunapic.com/editor/premade/transparent.gif";

<canvas id="canvas" width="500" height="500">your canvas loads here</canvas>

Solution 3

It ought to work fine, are you sure your image is really transparent and not just white in the background?

Here's an example of drawing a transparent PNG over a black rectangle to base your code off of:

http://jsfiddle.net/5P2Ms/

Solution 4

If you are drawing it in a render loop, you need to make sure to run context.clearRect( 0, 0, width, height ) first, otherwise you are just writing the png over the png every frame, which will eventually be opaque. (But frames render fast, so you wouldn't see this with the naked eye.)

Solution 5

NB, if you was to use canvas.toDataURL and you set the mimetype to anything other than say gif or png, the transparent parts of the image will be completely black.

drawing = new Image();
drawing.onload = function () {
    context.drawImage(drawing,0,0);
    var base64 = canvas.toDataURL('image/png', 1);
};
drawing.src = "draw.png";

View more solutions

Comments

[Chewie The Chorkie]

What is the variable "base64" actually doing in this code? I don't see it written anywhere else.

[Luke Madhanga]

@vagueexplanation Make four.

[Eric Silveira]

Same as the one with most upvotes. The difference between the question and these 2 answers is the image.onload.