Второй вариант использования метода drawImage отличается от первого тем что в нем присутствуют параметры масштабного отображения на холсте.
DrawImage(image, x, y, width, height)
Где width и height ширина и высота изображения на холсте.
Пример 2 использования изображения
В этом примере мы используем одно изображение как обои чтобы повторить его на холсте несколько раз. Это осуществляется с помощью цикла и размещения масштабных изображений на разных позициях. В этом примере первый цикл for отсчитывает ряды а второй цикл for отсчитывает колоны. Изображение равно одной третьей исходного изображения (50x38 пикселей).
Примечание: При масштабировании изображение теряет качество, а текст теряет очертания.
Посмотреть этот пример
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); 
var img = new Image(); img.onload = function(){ for (i=0;i<4;i++){ for (j=0;j<3;j++){ 
ctx.drawImage(img,j*50,i*38,50,38); } } } img.src = 'images/rhino.jpg'; }