--- title: CanvasRenderingContext2D.drawImage() slug: Web/API/CanvasRenderingContext2D/drawImage tags: - API - Canvas - CanvasRenderingContext2D - Ссылка - метод translation_of: Web/API/CanvasRenderingContext2D/drawImage ---
{{APIRef}}

CanvasRenderingContext2D.drawImage() метод Canvas 2D API предоставляет разные способы рисования изображения на холсте.

Синтаксис

void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

drawImage

Параметры

image
Элемент для отображения в контексте. Функция принимает любой источник изображения, пригодный для отображения на холсте ({{domxref("CanvasImageSource")}}), конкретнее, {{domxref("CSSImageValue")}},  {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("ImageBitmap")}} или {{domxref("OffscreenCanvas")}}.
dx
Координата по оси Х, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного image.
dy
Координата по оси Y, обозначающая стартовую точку холста-приемника, в которую будет помещен верхний левый угол исходного image.
dWidth
Ширина изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано.
dHeight
Высота изображения, полученного из исходного image. Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано.
sx
Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.
sy
Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещен в контекст-приемник.
sWidth
Ширина фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник. Если не задана, фрагмент от точки, заданной sx и sy до правого нижнего угла источника будет целиком скопирован в контекст-приемник.
sHeight
Высота фрагмента, который будет вырезан из изображения источника и помещен в контекст-приемник.

Исключения

INDEX_SIZE_ERR
Выбрасывается, если ширина или высота источника или приемника равна нулю.
INVALID_STATE_ERR
Источник не имеет данных изображения.
TYPE_MISMATCH_ERR
Тип данных источника не поддерживается.

Примеры

Использование метода drawImage

Вот простой пример использования drawImage.

HTML

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227">
</div>

JavaScript

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

ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

Отредактируйте код ниже и посмотрите, как ваши изменения отражаются на холсте:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div style="display:none;">
  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = document.getElementById('source');
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

{{ EmbedLiveSample('Playable_code', 700, 360) }}

Понимание размеров изображения-источника

Метод drawImage() использует внутренние размеры элемента-источника, выраженные в CSS-пикселях (а не реальные размеры самой картинки).

Например, если изображение было загружено с использованием необязательных параметров width и height в конструкторе {{domxref("HTMLImageElement")}}, вместо element.width и element.height вам следует использовать свойства naturalWidth и naturalHeight экземпляра картинки (или videoWidth и videoHeight, если источник {{htmlelement("video")}}), чтобы добиться правильного масштабирования и получения фрагментов картинки.

HTML

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

JavaScript

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

var image = new Image(60, 45);   // Размер изображения
image.onload = drawImageActualSize; // Рисуем изображение, когда оно будет загружено

// load an image of intrinsic size 300x227 in CSS pixels
image.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

function drawImageActualSize() {
  // use the intrinsic size of image in CSS pixels for the canvas element
  canvas.width = this.naturalWidth;
  canvas.height = this.naturalHeight;

  // will draw the image as 300x227 ignoring the custom size of 60x45
  // given in the constructor
  ctx.drawImage(this, 0, 0);

  // To use the custom size we'll have to specify the scale parameters
  // using the element's width and height properties - lets draw one
  // on top in the corner:
  ctx.drawImage(this, 0, 0, this.width, this.height);
}

Результат

{{EmbedLiveSample('Understanding_source_element_size', 700, 360)}}

 

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

 

Спецификация Статус Комментарий
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} {{Spec2('HTML WHATWG')}}  

Совместимость с браузерами

{{CompatibilityTable}}

Функция Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
ImageBitmap как источник {{CompatVersionUnknown}} {{CompatNo}} {{CompatGeckoDesktop(42)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
SVGImageElement как источник {{CompatChrome(59)}} {{CompatUnknown}} {{CompatGeckoDesktop(56)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Сглаживание при сжатии {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatGeckoDesktop(56)}}[1] {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}
Функция Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
ImageBitmap как источник {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatGeckoMobile(42)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
SVGImageElement как источник {{CompatChrome(59)}} {{CompatChrome(59)}} {{CompatUnknown}} {{CompatGeckoMobile(56)}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Сглаживание при сжатии {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatGeckoMobile(56)}}[1] {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}}

[1] См. {{bug(1360415)}}

Дополнительно о совместимости

Дополнительно

См. также