images not loading in html5 canvas

Question

only a plain canvas shows up and the images don't load

<canvas width=800 height=500 id='egypt_id'></canvas>

<script>

//setup
var canvas = document.getElementById('egypt_id');
var context = canvas.getContext('2d');
var mubarak_x = 700;
var mubarak_y = 50;
var morsi_x = 25;
var morsi_y = 150;
var qm_x = 500;
var qm_y = 200;

//make new image objects
var egypt_img = new Image();
var mubarak_img = new Image();
var morsi_img = new Image();
var qm_img = new Image();

//these functions draw images on the canvas, at the given position
egypt.onload=function draw_egypt()
{
   context.drawImage(egypt_img,0, 0);
}

function draw_mubarak()
{
   //image
   context.drawImage(mubarak_img, mubarak_x, mubarak_y);

   //label
   context.fillStyle = 'black';
   context.font = 'bold 16px Arial';
   context.fillText('Mubarak', mubarak_x, mubarak_y);
}

function draw_morsi()
{
   //image
   context.drawImage(morsi_img, morsi_x, morsi_y);

  //label 
   context.fillStyle = 'black';
   context.font = 'bold 16px Arial';
   context.fillText('Morsi', morsi_x, morsi_y);
}

function draw_qm()
{
   //image
   context.drawImage(qm_img, qm_x, qm_y);

   //label
   context.fillStyle = 'black';
   context.font = 'bold 16px Arial';
   context.fillText('?', qm_x, qm_y);
}

 //load images
 //draw this image as soon as it loads
   egypt_img.onload = draw_egypt;
   egypt_img.src = 'media/egypt.png';


function line_mubarak_morsi()
{
  //draw line between mubarak and morsi
   context.lineWidth = 5;
   context.strokeStyle = 'lightblue';

   //pick-up pen
   context.beginPath();

   //start
   context.moveTo(mubarak_x, mubarak_y);

   //end
   context.lineTo(morsi_x, morsi_y);

  //draw it
  context.stroke();
 }


function line_morsi_qm()
{
  //draw line between morsi and qm

   context.lineWidth = 5;
   context.strokeStyle = 'lightblue';

  //pick-up pen
  context.beginPath();

  //start
  context.moveTo(morsi_x, morsi_y);

  //end
  context.lineTo(qm_x, qm_y);

  //draw it
   context.stroke();
}

function redraw()
{
  //redraws everything, spread over three seconds...
  //immediately draw background (covering all old stuff)
   draw_egypt();

  //after one second
   setTimeout(draw_mubarak, 1000);

  //after two seconds
  setTimeout(line_mubarak_morsi, 2000);
  setTimeout(draw_morsi, 2000);

  //after three seconds
   setTimeout(line_morsi_qm, 3000);
   setTimeout(draw_qm, 3000);
}

  //finally: call the redraw function every four seconds, forever...
 setInterval(redraw, 4000);

</script>

Answer 1

Some suggestions and a Demo: http://jsfiddle.net/m1erickson/kJvj5/

• preload all your images before you start drawing any of them

• create a single draw() function that draws necessary images based on elapsed time.

• use requestAnimationFrame to create an animation loop

Example results:

Preload all your images before you start drawing any of them

This code loads all the images and calls start() when they are all fully loaded:

// variables for image objects
var egypt,mubarak,morsi,qm;

// load all images first then call start() when fully loaded
var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/egypt.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/sillouette1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/sillouette2.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/qm.png");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}


function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]

    // get name references to the images
    egypt=imgs[0];
    mubarak=imgs[1];
    morsi=imgs[2];
    qm=imgs[3];

    // resize the canvas to the egypt image size: imgs[0]
    canvas.width=egypt.width;
    canvas.height=egypt.height;

    // start the animation
    animate();

}

Create a single draw() function that draws necessary images based on elapsed time.

The draw() function will draw each image based on how much time has elapsed.

function draw(elapsed){

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

    // draw Egypt
    ctx.drawImage(egypt,0,0);

    // draw mubarak after 1 second
    if(elapsed>1000){
        ctx.drawImage(mubarak,20,20);
    }

    // draw line after 2 seconds
    if(elapsed>2000){
        ctx.moveTo(canvas.width,0);
        ctx.lineTo(0,canvas.height);
        ctx.lineWidth=3;
        ctx.stroke();
    }

    // draw morsi after 2 second2
    if(elapsed>2000){
        ctx.drawImage(morsi,
            canvas.width-morsi.width-20,
            canvas.height-morsi.height-20
        );
    }

    // draw qm after 3 second
    if(elapsed>3000){
        var resizedWidth=qm.width/3;
        var resizedHeight=qm.height/3;

        ctx.drawImage(qm,
            canvas.width/2-resizedWidth/2,
            canvas.height/2-resizedHeight/2,
            resizedWidth,
            resizedHeight
        );
    }


}

Use requestAnimationFrame to create an animation loop.

This is how to create an animation loop using the highly efficient requestAnimationFrame method

function animate(time){

    // ask for another loop
    requestAnimationFrame(animate);

    // draw based on the elapsed time through 4 seconds (4000ms)
    draw(time%4000);

}

Answer 2

I made some changes to your code Please check whether you want to implement the same.

jsfiddle link

Code is as below removed egypt from the the function, please add the required params to support egypt

function draw_egypt()
{ 
  context.drawImage(egypt_img,0, 0);
}