Disegno PNG su un elemento canvas - non mostra trasparenza

Question

Sto provando a usare drawImage per disegnare un PNG semitrasparente su un elemento canvas. Tuttavia, disegna l'immagine come completamente opaca. Quando guardo la risorsa che viene caricata e carico il PNG effettivo nel browser, mostra la trasparenza, ma quando la disegno sulla tela non lo fa. Qualche idea?

Ecco il codice:

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

Answer 1

Dovrebbe funzionare bene, sono sicuro che la tua immagine è davvero trasparente e non solo bianco sullo sfondo?

Ecco un esempio di disegnare un PNG trasparente sopra un rettangolo nero di basare il codice fuori di:

http://jsfiddle.net/5P2Ms/

Answer 2

Se si sta disegnando in un ciclo di rendering, è necessario assicurarsi di eseguire context.clearRect(0, 0, width, height) prima, altrimenti stai solo scrivendo il png sul png ogni frame, che alla fine sarà opaco. (Ma i fotogrammi rendono veloce, quindi non lo vedresti ad occhio nudo.)

Answer 3

Non dimenticare di aggiungere un listener di eventi all'evento di caricamento dell'immagine. Il caricamento dell'immagine è qualcosa che accade in background, quindi quando l'interprete JavaScript arriva alla parte canvas.drawImage è molto probabile che l'immagine probabilmente non sia ancora stata caricata ed è solo un oggetto immagine vuoto, senza contenuto.

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

Answer 4

NB, se si era di usare canvas.toDataURL e di impostare i mimetype a qualcosa di diverso da dire gif o png, le parti trasparenti dell'immagine sarà completamente nera.

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

Answer 5

Si può semplicemente inserire qualsiasi immagine trasparente con Image oggetto:

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>