js в visual code графика не отображается

[rabishchuk]

Обновляю страницу а экран белый,в чем может быть проблема подскажите пожалуйста

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeUP = new Image();
var pipeBottom = new Image();

bird.src = "img/bird.png";
bg.src = "img/bg.png";
fg.src = "img/fg.png";
pipeBottom.src = "img/pipeBottom.png";
pipeUP.src = "img/pipeUp.png";

function draw(); {
    ctx.drawImage(bg, 0, 0);
}

pipeBottom.onload = draw;

[laimas]

function draw(); {

Прям так и есть или только тут случайно?

[rabishchuk]

тут случайно ,но изображение не выводить ,все перепробывал

[Alexandroppolus]

pipeBottom.onload = draw;

pipeBottom загружается, а bg, скорее всего, не успевает

[voraa]

Что то типа такого надо

function loadImg (img, src) {
  return new Promise ( (res, rej) => {
    img.onload = () => res()
    img.onerror = () => rej()
    img.src = src
  })
}

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
 
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeUP = new Image();
var pipeBottom = new Image();

function draw(); {
    ctx.drawImage(bg, 0, 0);
}
  
let ap = [
  loadImg(bird, "img/bird.png"),
  loadImg(fg, "img/fg.png"),
  loadImg(pipeUp, "img/pipeUp.png"), // Если тоже нужно ждать
]
loadImg(pipeUp, "img/pipeUp.png")
  .then(() => Promise.allSettled(ap))
  .then(() => draw());

[рони]

img.onload = () => res()

img.onload = res;

[voraa]

Я так пишу для однообразия (для себя)
Просто если, вдруг потом выяснится, что лучше промису возвращать какое то значение, то просто подставить его.
Например
img.onload = () => res(img)
img.onerror = () => rej({reason:'load error'})

[Alexandroppolus]

удобнее сразу создавать картинку в loadImg, и резолвить ее в промис

function loadImg (src) {
  return new Promise ( (res, rej) => {
    const img = new Image();
    img.onload = () => res(img);
    img.onerror = () => rej();
    img.src = src;
  });
}

[voraa]

Может и удобнее, но тогда все функции переписывать.
В частности draw Иначе до конкретной картинки bg трудно добраться.
К тому же, в случае ошибки, img после allSettled не получить.
Там в ответе после rej() будет не img, а {status:'reject', reason:undefined}

[voraa]

А "моднее" так эту функцию сделать

function loadImg (img, src) {
  img.src = src
  return img.decode().finally (() =>img)
}