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);

Spline

Please show a reproducible test case with the problem, and the OS/browser/version where it is failing. This generally works correctly. – Sparoid

I had the same problem and my html looks like this one. Does it matter where the script is placed? When you press submit it works but when you reload the page the picture is not rendered – Kinard

Answer 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);
};

Women

Answer 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>

Linolinocut

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

Answer 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/

Tegan

Answer 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.)

Pargeting

Answer 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";

Unable

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

@vagueexplanation Make four. – Unable