在画布中的另一个png上绘制一个png

Question

I'm making a rpg map creator in JS/Canvas for fun but I've a problem. I can draw images on my canvas but I can't draw an image with transparency on another image already drawn on the canvas.

I would like the mushroom to be on the grass, not erase it. The grid is just a helper, I have only 1 canvas and I draw my mushroom using putImageData .

http://img11.hostingpics.net/thumbs/mini_31288520120419113247.png (we can see that the mushroom image has transparency)

http://img11.hostingpics.net/thumbs/mini_71357220120419113257.png (seems not working here)

I've you have any ideas, they are welcome.

Answer 1

Don't use putImageData as it will replace the pixels, use

context.drawImage(document.getElementById('mushroomImg'),0,0 );
//syntax : drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

JSFiddle with two images : http://jsfiddle.net/GVPfj/3/

( sadly, I couldn't find a mushroom with transparency, so it is a house :-) )