CODEWITHSUNDEEP
javascripthtmlcanvaspngtransparency
Maelig
Maelig

Reputation: 2096

Draw a png on another png in a canvas

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.

Upvotes: 1

Views: 1927

Answers (1)

jazzytomato
jazzytomato

Reputation: 7239

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

Upvotes: 1

Related Questions