Два рисунка в CANVAS

Для хабра

by Alexander Shpak

HTML

<div>
    <img id="one" src="http://habrastorage.org/storage2/0b8/21b/78d/0b821b78d9afc7f8479f4016eaa86430.jpg" />
</div>
<div>
    <img id="two" src="http://habrastorage.org/storage2/bcc/8ad/b1c/bcc8adb1cf9b552c2edb5d0a36e7e872.jpg" />
</div>
<canvas id="cvs"></canvas>

JavaScript

var img1 = document.getElementById('one');
var img2 = document.getElementById('two');
var canvas = document.getElementById('cvs');
var ctx = canvas.getContext('2d');
ctx.fillRect(0, 0, 300, 150);
ctx.drawImage(img1, 0, 0, 50, 50);
ctx.drawImage(img2, 50, 50, 50, 50);