将图像加载到 HTML5 Canvas

Question

I am following an antiquated tutorial for building an game using HTML5 and JavaScript. I have worked with JavaScript in the past, but canvas is new to me. The code that I'm trying to run seems fairly straightforward, but it seems that HTML5 has changed since this tutorial was published, and I'm having trouble getting images to load.

I have done some research and was able to get an image to load correctly by first ensuring it was loaded before drawing it to the canvas. That was pretty straightforward, but now I'm not quite sure how to adapt the more in-depth code to work for the situation.

Given the following code, how and where would I need to ensure that the image is loaded first before drawing it. The main problems I'm facing are both where to put the code to wait for the load and how to ensure that the logo utility object is usable in the code below.

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

Figured it out, thanks to YosefTukachinsky's cryptic advice.

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);
}