Использование изображения

Метод drawImage() добавляет на холст изображение.

drawImage(изображение, X изображения, Y изображения, ширина изображения, высота изображения, X на холсте, Y на холсте, ширина на холсте, высота на холсте)

Параметры:

изображение - изображение, которое добавляется на холст

X изображения - координата X той части картинки, которую нужно использовать

Y изображения - координата Y той части картинки, которую нужно использовать

ширина изображения - ширина той части картинки, которую нужно использовать

высота изображения - высота той части картинки, которую нужно использовать

X на холсте - координата X на холсте, куда помещается левый край картинки

Y на холсте - координата Y на холсте, куда помещается верхний край картинки

ширина на холсте - ширина, которую займёт картинка на холсте

высота на холсте - высота, которую займёт картинка на холсте

Обязательные параметры - изображение, X на холсте, X на холсте. Остальные можно не указывать.

Если не указать параметры, относящиеся к изображению, то будет использована вся картинка. ширина на холсте и

высота на холсте позволяют изменить масштаб картинки при добавлении на холст. Если они не указаны, то картинка или её часть имеет свои реальные размеры.

Создадим холст и добавим на него картинку.

HTML код:

8	<canvas width="600" height="320"></canvas>

JavaScript:

10
11
12
13
14
15
16
17

let image = document.createElement('img');
image.src = 'images/image.jpg';
image.onload = function()
{
  let canvas = document.querySelector('canvas');
  let ctx = canvas.getContext('2d');
  ctx.drawImage(image, 5, 5);
}

Изображение можно загрузить динамически или использовать существующее на странице. Но метод drawImage() можно запускать только после загрузки картинки.

Теперь укажем размеры, которые должны быть у картинки:

16	ctx.drawImage(image, 5, 5, 250, 150);

Учитывайте, что нужно обеспечить правильное соотношение длины и ширины.

Когда вы добавляете на холст не всю картинку, а только её часть, то у метода drawImage() указываются все параметры, даже если масштаб не нужно менять.

16	ctx.drawImage(image, 50, 50, 200, 200, 5, 5, 200, 200);