Рисование PNG на элементе холста - не показывает прозрачность

Question

Я пытаюсь использовать drawImage, чтобы нарисовать полупрозрачный PNG на элементе canvas. Тем не менее, он рисует изображение полностью непрозрачным. Когда я смотрю на загружаемый ресурс и загружаю фактический PNG в браузере, он показывает прозрачность, но когда я рисую его на холсте, это не так. Есть идеи?

Вот код:

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

Answer 1

Не забудьте добавить прослушиватель событий к событию загрузки изображения. Загрузка изображений - это то, что происходит в фоновом режиме, поэтому, когда интерпретатор JavaScript попадает в часть canvas.drawImage, скорее всего, изображение, вероятно, еще не будет загружено и является просто пустым объектом изображения без содержимого.

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 2

Вы можете просто вставить любое прозрачное изображение, используя Image объект:

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>

Answer 3

Примечание: если вы должны были использовать canvas.toDataURL, и вы установили mimetype на что-либо, кроме, скажем, gif или png, прозрачные части изображения будут полностью черными.

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

Answer 4

Если вы рисуете его в цикле рендеринга, вам нужно сначала запустить context.clearRect( 0, 0, width, height ), иначе вы просто записываете png поверх png в каждом кадре, что в конечном итоге будет непрозрачным. (Но кадры отображаются быстро, поэтому вы не увидите этого невооруженным глазом.)

Answer 5

Должно работать нормально, вы уверены, что ваше изображение действительно прозрачное, а не просто белое на заднем плане?

Вот пример рисования прозрачного PNG над черным прямоугольником, чтобы основать ваш код на:

http://jsfiddle.net/5P2Ms/