CanvasRenderingContext2D.drawImage()

CanvasRenderingContext2D.drawImage() - малює зображення на полотні canvas.

Синтаксис:

ctx.drawImage( img, x, y);
ctx.drawImage( img, x, y, width, height);
ctx.drawImage( img, sx, sy, swidth, sheight, x, y, width, height ); //зверніть увагу на зміну порядності параметрів

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

img - елемент Image.

x - координати осі X на полотні.

y - координати осі Y на полотні.

width - ширина на яку малюється зображення на полотні.

height - висота на яку малюється зображення на полотні.

sx - координати осі X на зображенні.

sy - координати осі Y на зображенні.

swidth - ширина частини зображення.

sheight - висота частини зображення.

Опис:

drawImage() метод об'єкту CanvasRenderingContext2D який малює зображення, відео на полотно canvas.

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

Метод drawImage() після завантаження зображення. Для того, щоб переконатися що зображення було завантажено потрібно викликати drawImage() у події onload.

Приклад:

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

var img=document.createElement("img");
img.onload=function(){
    ctx.drawImage(img, 0, 0);
}
img.src="/dani/test.png";

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

var img=document.createElement("img");
img.onload=function(){
    ctx.drawImage(img, 0, 0, 150, 120);
}
img.src="/dani/test.png";

Копіюємо частину зображення:

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

var img=document.createElement("img");
img.onload=function(){
    ctx.drawImage(img, 0, 0, 150, 120, 0, 0, 100, 100);
}
img.src="/dani/test.png";