1. Canvas
  2. Вставить картинку

Вставить картинку

Сначала через JavaScript надо создать объект Image.

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

Созданную картинку теперь можно добавить в Canvas через метод drawImage().

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext("2d");
 
var img = new Image();
img.src = "path/image.jpg";
img.onload = function(){
    ctx.drawImage(img, 0, 0); // drawImage(img, x, y);
}

Пример на JSFiddle

В методе drawImage() также можно указать размер картинки.

ctx.drawImage(img, 0, 0, 200, 200); // drawImage(img, x, y, width, height);