Почему картинка не отображается?

Question

[Ibishka]

Почему ground не отображается?

.canvas {
  background: url("../img/bg.jpg") no-repeat center;
  display: block;
}

const canvas = document.querySelector("#canvas"),
  ctx = canvas.getContext("2d");
// Set canvas width & height;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// show ground
const ground = new Image();
ground.src = "assets/img/ground.jpg";
ctx.drawImage(ground, 10, 10);

Comments

[ProjectSoft]

Потому что изображение ещё не загружено.

const canvas = document.querySelector("#canvas"),
  ctx = canvas.getContext("2d");
// Set canvas width & height;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// show ground
const ground = new Image();
ground.src = "assets/img/ground.jpg";
ground.onload = function(){
	ctx.drawImage(this, 0, 0, 660, 440, 0, 0, 400, 200);
}

Обязательно почитайте про функцию drawImage

Answer 1

[Aetae]

Потому что надо подождать пока картинка загрузится:

const ground = new Image();
ground.onload = () => ctx.drawImage(ground, 10, 10);
ground.onerror = console.error;
ground.src = "assets/img/ground.jpg";