З АХВАТ ИЗОБРАЖЕНИЙ Помимо рисования линий и форм, вы также можете копировать изображения — фотогра-
фии, видео и другие элементы холста — из других источников. Я уже демонстрировал, как
использовать изображение в качестве источника для заливки
createPattern
. Но можно
и просто поместить изображение на холст. Или не просто, а кадрировав его или применив
другие корректировки.
var ctx = document.getElementById('mycanvas').
getContext('2d'),
img = new Image();
img.onload = function () {
ctx.canvas.height = 500;
ctx.canvas.width = 500;
ctx.drawImage(this, 10, 10, 100, 100, 0, 0, 500, 500);
};
img.src = 'bruce-and-remy-promo-pics.jpg';
СОВЕТ Все контексты рисования 2D включают обратную ссылку на элемент холста, на котором они
рисуют объекты Это означает, что вам не приходится передавать функциям две переменные,
можно просто передать контекст и получить обратно ссылку на элемент холста, а затем поменять
высоту, ширину или получить URL данных
