HTML5 canvas drawImage not working on first click

Question

I have a canvas that I am using a javascript function to display text and a couple of images. The issue that I am running into is that the click does perform the function and displays the text, but does not always place the images. If clicked a second time, the images appear. This behavior is consistent in all browsers. The command is not slow, it just fails to display the images the first time. TIA

// JavaScript Document

    function manualsTxt() {
        var theCanvas = document.getElementById('Canvas1');
        if (theCanvas && theCanvas.getContext) {
            var ctx = theCanvas.getContext("2d");

            if (ctx) {
                var img1 = new Image();
                var img2 = new Image();
                var img3 = new Image();
                img1.src = "images/InRoads2004.png";
                img2.src = "images/XMUp.png";
                img3.src = "images/XM.png";

                //clear canvas
                ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

                // .drawImage (src, posX, posY);
                ctx.drawImage (img1, 50, 325);
                ctx.drawImage (img2, 250, 325);
                ctx.drawImage (img3, 450, 325);

                ctx.textBaseline = 'bottom';
                ctx.font         = 'bold 30px sans-serif';
                ctx.fillStyle   = '#671420';
                ctx.fillText ('InRoads Manuals', 60, 30);

                ctx.fillStyle    = '#000';
                ctx.font         = 'italic bold 16px sans-serif';
                ctx.textBaseline = 'top';
                ctx.fillText  ('MJM Consulting has published several InRoads training', 80, 60);
                ctx.fillText  ('manuals that have been used all over the world.  We have', 90, 80);
                ctx.fillText  ('utilized our training manuals in all of our on-site trainings', 100, 100);
                ctx.fillText  ('for dozens of civil engineering firms and Department of', 105, 120);
                ctx.fillText  ('Transportations.  Our manuals were one of the first to follow', 110, 140);
                ctx.fillText  ('a typical civil design project format.  Our manuals are easy', 115, 160);
                ctx.fillText  ('to follow and contain a cd with a self-installing data set.', 115, 180);
                ctx.fillText  ('While our manuals are listed on other sites such as Amazon.com,', 115, 220);
                ctx.fillText  ('ordering direct from us is the only place you will get a', 110, 240);
                ctx.fillText  ('full color version of the manual.', 105, 260);

            }
        }
    }

Answer 1

Because you're not waiting for the images to finish loading.

var img = new Image();   // Create new img element
img.onload = function(){
  // execute drawImage statements here
};
img.src = 'myImage.png'; // Set source path

Make sure the onload event has fired for each image before trying to draw. If you have multiple images and don't want to make something complicated then there are libraries that do this for you, such as pxloader.