캔버스에있는 다른 PNG에 PNG 그리기

Question

재미있게 JS/Canvas에서 rpg 맵 작성자를 만들고 있지만 문제가 있습니다. 캔버스에 이미지를 그릴 수는 있지만 이미 캔버스에 그려진 다른 이미지에는 투명도가있는 이미지를 그릴 수 없습니다.

나는 버섯을 풀밭에 놓고 지우고 싶지 않다. 그리드는 단지 도우미 일뿐입니다. 캔버스는 1 개 밖에 없으며 putImageData을 사용하여 버섯을 그립니다.

http://img11.hostingpics.net/thumbs/mini_31288520120419113247.png 그들이 환영합니다, 당신이 어떤 아이디어가했습니다

http://img11.hostingpics.net/thumbs/mini_71357220120419113257.png (여기에 작동하지 않는 것 같다)

을 (우리는 버섯의 이미지 투명성을 가지고 있음을 볼 수있다).

Answer 1

는 두 개의 이미지로

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

JSFiddle를, 픽셀을 대체 사용으로 putImageData를 사용하지 마십시오 : 슬프게도 http://jsfiddle.net/GVPfj/3/

(I 투명성과 버섯을 발견, 그래서 수없는 것이