Cómo dibujar PNG en un elemento canvas - sin transparencia

Question

Estoy tratando de usar drawImage para dibujar un PNG semitransparente en un elemento canvas. Sin embargo, dibuja la imagen como completamente opaca. Cuando miro el recurso que se está cargando y cargo el PNG real en el navegador, muestra la transparencia, pero cuando lo dibujo en el lienzo, no lo hace. ¿Algunas ideas?

Aquí está el código:

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

Answer 1

Debería funcionar bien, ¿está seguro de que su imagen es muy transparente y no sólo blanco en el fondo?

He aquí un ejemplo del dibujo de un PNG transparente sobre un rectángulo negro basar su código fuera de:

http://jsfiddle.net/5P2Ms/

Answer 2

Si el equipo está en un bucle de render, que necesita para asegurarse de ejecutar context.clearRect(0, 0, width, height) primero, de lo contrario, solo está escribiendo el png sobre el png en cada fotograma, que eventualmente será opaco. (Pero los cuadros se procesan rápidamente, por lo que no se verá a simple vista)

Answer 3

No olvide agregar un detector de eventos al evento de carga de la imagen. La carga de imágenes es algo que sucede en segundo plano, por lo que cuando el intérprete de JavaScript llega a la parte lienzo.dibujar, lo más probable es que la imagen no se haya cargado todavía y que sea solo un objeto de imagen vacío, sin contenido.

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, si era utilizar canvas.toDataURL y establece los mimetype a otra cosa que no sea decir gif o png, las partes transparentes de la imagen será completamente negro.

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

Answer 5

Simplemente puede insertar cualquier imagen transparente usando Image objeto:

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>