Dessiner un png sur un autre png dans une toile

Question

Je fais un créateur de carte rpg dans JS/Canvas pour le plaisir mais j'ai un problème. Je peux dessiner des images sur ma toile mais je ne peux pas dessiner une image avec transparence sur une autre image déjà dessinée sur la toile.

Je voudrais que le champignon soit sur l'herbe, ne l'efface pas. La grille est juste une aide, j'ai seulement 1 toile et je dessine mon champignon en utilisant putImageData.

http://img11.hostingpics.net/thumbs/mini_31288520120419113247.png (nous pouvons voir que l'image de champignon a la transparence)

http://img11.hostingpics.net/thumbs/mini_71357220120419113257.png (semble ne fonctionne pas ici)

Je vous ai des idées, ils sont les bienvenus.

Answer 1

Ne pas utiliser putImageData comme il remplacera les pixels, utilisez

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

jsFiddle avec deux images: http://jsfiddle.net/GVPfj/3/

(malheureusement, je ne pouvais pas trouver un champignon avec la transparence, il est une maison :-))