javascript - キャンバス内の別の 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

ピクセルを置き換えるため、putImageData を使用しないでください。

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