Как нарисовать изображение на Canvas?

@gage 

Для того чтобы нарисовать изображение на Canvas необходимо выполнить следующие шаги:

1. Создать объект Canvas, указав его ширину и высоту:

1
2
3
4

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

1. Загрузить изображение с помощью объекта Image и указать его путь:

1
2

var img = new Image();
img.src = "image.png";

1. Дождаться загрузки изображения и нарисовать его на Canvas:

1
2
3

img.onload = function() {
  ctx.drawImage(img, 0, 0);
};

Это пример кода для отображения изображения на Canvas. Есть и другие способы, например, можно нарисовать изображение напрямую на Canvas с помощью метода ctx.fillRect(), используя данные пикселей изображения.