How do I make sure that images load in the right order on the canvas?

Question

I have the following JavaScript file with a function called menu that calls the draw function 4 different times to display 4 different images on the screen.

I need to display them in the order they are coded in, but every time I refresh I get something different. I understand that this is most likely because some of the images load faster than others.

I have looked up some other examples of this on the site and the solution seems to be drawing the images only when all of them are loaded first, however I can't get that to work.

Is there another way?

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
var audio = new Audio('sounds/sound.ogg');
cvs.addEventListener("click", function(){
        audio.play();
});
var logoSound;

ctx.fillStyle= "#87ceeb";
ctx.fillRect(0,0,1330,800);

function draw(src, a, b) {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function() {
    ctx.drawImage(img, x, y);
  };
  img.src = src;
}

function menu() {
    draw("images/clouds.png", 0, 300);
    draw("images/background.png", 0, 360);
    draw("images/display.png", 410, 0);
    draw("images/plank.png", 405, 300);
}

menu();

Update

async function draw(src,x,y) {
    var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,x,y);
  };
img.src = src;
}

// main
(async function menu (){
    await draw("images/clouds.png", 0, 300);
    await draw("images/background.png", 0, 360);
    await draw("images/display.png", 410, 0);
    await draw("images/plank.png", 405, 300);
    await draw("images/info.png", 1195, 660);
}());

function cloud2(){
    ctx.drawImage(cloud, speed, 0);

    cvs.requestAnimationFrame(cloud);
}

menu();

Answer 1

You could make your draw function asynchronous. The setTimeout call is a simulation of your asynchronous on load handler.

    async function draw (msg) {
        return new Promise ((resolve, reject) => {
            let randomDelay = Math.floor(Math.random() * 3000);
            setTimeout(() => {
                resolve(msg);
            }, randomDelay);
        });
    }

    (async function (){
        console.log(await draw(1));
        console.log(await draw(2));
        console.log(await draw(3));
        console.log(await draw(4));
    }());

Which would guarantee the drawing order.

output is: 1 2 3 4

Answer 2

Drawing an image on a canvas is a synchronous operation, what is not, is to load these images.

So split your logic in 1.Loading, then 2.Drawing

The loading part will just create as many <img> elements as you need to be drawn, operation greatly cleaned up thanks to Promises.

Once that's done, the drawing part will just iterate over the images and draw them:

 const ctx = canvas.getContext('2d'); function loadImages(urls) { return Promise.all(urls.map(loadImage)); } function loadImage(url) { return new Promise((res, rej) => Object.assign((new Image()), { src: url, onload: function(e){res(this)}, onerror: rej })); } function drawImages(images) { images.forEach((img, i) => ctx.drawImage(img, i * 50, 0)); } async function begin()  { // build up our array of urls const urls = Array.from({ length: 10 }, () => 'https://lorempixel.com/50/50?' + Math.random()); // load them all const images = await loadImages(urls); // draw them all drawImages(images); } begin().catch(console.error) 

 <canvas id="canvas" width="500" height="50"></canvas> 

Note that it is the basic operations when external assets are required:

• Load all required assets.
• Then start using them.