Загрузка изображения на HTML5 Canvas

Question

Я следую устаревшей инструкции по созданию игры с использованием HTML5 и JavaScript. Я работал с JavaScript в прошлом, но холст для меня новый. Код, который я пытаюсь запустить, кажется довольно простым, но кажется, что HTML5 изменилось с момента публикации этого учебника, и у меня возникают проблемы с загрузкой изображений.

Я провел некоторое исследование и смог получить изображение для правильной загрузки, сначала убедившись, что оно было загружено до рисования его на холсте. Это было довольно просто, но теперь я не совсем уверен, как адаптировать более глубокий код для работы в данной ситуации.

Учитывая следующий код, how и где мне нужно было бы убедиться, что изображение загружается в первую очередь перед его рисованием. Основные проблемы, с которыми я сталкиваюсь, заключаются в том, где разместить код для ожидания загрузки и как обеспечить возможность использования служебного объекта lo go в приведенном ниже коде.

var phrase = "Click or tap the screen to start the game";

    // Clear the canvas
    c.clearRect (0, 0, canvas.width, canvas.height);

    var logoImg = new Image();
    logoImg.src = '../img/logo.png';

    // Store the original width value so that we can keep the same width/height ratio later
    var originalWidth = logoImg.width;

    // Compute the new width and height values
    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

    // Create an small utility object
    var logo = {
        img: logoImg,
        x: (canvas.width/2) - (logoImg.width/2),
        y: (canvas.height/2) - (logoImg.height/2)
    }

    // Present the image
    c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

    // Change the color to black
    c.fillStyle = '#000000';
    c.font = 'bold 16px Arial, sans-serif';

    var textSize = c.measureText (phrase);
    var xCoord = (canvas.width / 2) - (textSize.width / 2);

    c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50);

Answer 1

Понял, благодаря совету Йосефа Тукачинского c.

var logoImg = new Image();
logoImg.src = '../img/logo.png';

logoImg.onload = function(){ 
     // Store the original width value so that we can keep the same width/height ratio later
     var originalWidth = logoImg.width;

     // Compute the new width and height values
     logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
     logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

     // Create an small utility object
     var logo = {
          img: logoImg,
          x: (canvas.width/2) - (logoImg.width/2),
          y: (canvas.height/2) - (logoImg.height/2)
     }

     // Present the image
     c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

     // Change the color to black
     c.fillStyle = '#000000';
     c.font = 'bold 16px Arial, sans-serif';

     var textSize = c.measureText (phrase);
     var xCoord = (canvas.width / 2) - (textSize.width / 2);

     c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50);
}