drawImage()

Метод drawImage() рисует изображение, содержимое другого элемента <canvas> или видео.

Также, метод drawImage() может нарисовать часть изображения и/или увеличить/уменьшить размер изображения.

Внимание: Нельзя вызывать метод drawImage() прежде, чем изображение будет загружено. Чтобы убедиться, что изображение было загружено, вызов метода drawImage() можно поместить внутри события window.onload() или document.getElementById("imageID").onload.

Синтаксис

Вывод изображения в заданной позиции на холсте:

context.drawImage(img, x, y);

Вывод изображения в заданной позиции на холсте и определение его ширины и высоты:

context.drawImage(img, x, y, width, height);

Обрезание изображения и вывод обрезанной части в заданную позицию:

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

Параметры

img

Определяет используемое изображение, видео или элемент <canvas>

sx

Необязательный параметр. Координата X начальной точки обрезки

sy

Необязательный параметр. Координата Y начальной точки обрезки

swidth

Необязательный параметр. Ширина обрезанного изображения

sheight

Необязательный параметр. Высота обрезанного изображения

x

Координата X на холсте, куда будет помещено изображение

y

Координата Y на холсте, куда будет помещено изображение

width

Необязательный параметр. Применяемая ширина изображения (можно растянуть или сжать изображение)

height

Необязательный параметр. Применяемая высота изображения (можно растянуть или сжать изображение)

Спецификация

• HTML Living Standard

Примеры

Изображение для примера:

Пример 1

Нарисовать изображение на холсте:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

window.onload = function () {
  var c = document.getElementById('myCanvas')
  var ctx = c.getContext('2d')
  var img = document.getElementById('scream')
  ctx.drawImage(img, 10, 10)
}

Пример 2

Поместим изображение в заданную позицию на холсте и определим его ширину и высоту:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

window.onload = function () {
  var c = document.getElementById('myCanvas')
  var ctx = c.getContext('2d')
  var img = document.getElementById('scream')
  ctx.drawImage(img, 10, 10, 150, 180)
}

Пример 3

Обрежем изображение и поместим обрезанную часть в заданную позицию на холсте:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:

window.onload = function () {
  var c = document.getElementById('myCanvas')
  var ctx = c.getContext('2d')
  var img = document.getElementById('scream')
  ctx.drawImage(img, 90, 130, 50, 60, 10, 10, 50, 60)
}

Пример 4

Используемое видео (нажмите Play, чтобы начать демонстрацию):

Элемент canvas:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript (код рисует текущий кадр видео каждые 20 миллисекунд):

var v = document.getElementById('video1')
var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
var i

v.addEventListener(
  'play',
  function () {
    i = window.setInterval(function () {
      ctx.drawImage(v, 5, 5, 260, 125)
    }, 20)
  },
  false
)
v.addEventListener(
  'pause',
  function () {
    window.clearInterval(i)
  },
  false
)
v.addEventListener(
  'ended',
  function () {
    clearInterval(i)
  },
  false
)

Ссылки

• Метод drawImage() ^{MDN (рус.)}