Как перекрыть одно изображение другим в канвасе?

Question

[alexnotonfire]

Например, в следующем примере я хочу чтобы зеленый ящик был поверху красного.

Как добиться этого?

Мой Codepen

HTML

<canvas id="canvas">
</canvas>

JS

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

window.onload = draw;

img1 = new Image;
img1.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';

img2 = new Image;
img2.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';

function draw() {
 ctx.drawImage(img1, 0, 0, 200, 200);
 ctx.drawImage(img2, 100, 0, 200, 200);
}

Answer 1

[twobomb]

Каждое следующие рисование накладывается поверх того что у уже есть на канвасе, следовательно просто рисуй в обратной порядке.

ctx.drawImage(img2, 100, 0, 200, 200);//Сначала красный
 ctx.drawImage(img1, 0, 0, 200, 200);//А далее поверх него зеленый

Answer 2

[Николай]

Нарисовать в другом порядке?