Как нарисовать картинку в canvas?

Question

[joyrax-dev]

Пытаюсь нарисовать картинку в canvas:

let img = new Image()
img.src = "path/to/img.jpg"
ctx.drawImage(img, x, y);

Картинка подгружается в память, ибо срабатывает событие у объекта Image onload, я его отслеживал, но в сам canvas ничего не рисовало, хотя всякие круги и прямоугольники нарисовать получается.

Answer 1

[szQocks]

Скорее всего ошибка в путях, либо не верно отслеживал событие.

const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;

const ctx = canvas.getContext('2d');

document.body.append(canvas);

let img = new Image();
img.onload = () => {
  ctx.drawImage(img, 0, 0);
}
img.src = "https://i.pinimg.com/originals/87/48/07/874807f8cb45e17f44312eb761261ad9.jpg";

Answer 2

[Aetae]

let img = new Image()
// создали Image, пока ничего не происходит

img.src = "path/to/img.jpg"
// установили src - пошла загрузка картинки

ctx.drawImage(img, x, y);
// нарисовали на канвасе сраное ничто

// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки

// картинка загрузилась, вызвано событие img.onload

Comments

[joyrax-dev]

видимо именно так и получалось у меня