How to execute a function after another one that has an onload function inside it?

Question

• I want to display an image (dinamically) on the canvas and then reset it.
• drawImage() is the function that draws the image on the canvas after its source is loaded .

• resetCanvas() is the function that resets/clean the canvas.

   var canvas = document.getElementById("Canvas"); const ctx = canvas.getContext("2d"); drawImage("img/earth.jpg"); resetCanvas(); //more code function resetCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function drawImage(source) { var img = new Image(); img.onload = function() { var x = img.width; var y = img.height; adjustCanvasSize(x, y); ctx.drawImage(img,0,0, x, y); } img.src = source; } 

When I execute this code, the resetCanvas() is "ignored". I don't want to insert the resetCanvas() inside the onload function of the drawImage() as it actually represents many other distinct functions and instructions that are going to be executed after the drawImage() and it would look wrong.

I was thinking if there was a way of making javascript more patient and stop it from executing anything until the image gets loaded in the drawImage function.

Answer 1

A few comments:

1. If you reset the canvas after drawing the image you you won't see the image since the resetCanvas function is deleting everything you previously draw on the canvas

2. There are some problems when working with images in canvas. Please read this article: MDM Using images

Next come my code. I hope it helps.

 var canvas = document.getElementById("Canvas"); const ctx = canvas.getContext("2d"); resetCanvas(); drawImage("https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg"); //more code function resetCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function drawImage(source) { var img = new Image(); img.onload = function() { var x = img.width; var y = img.height; adjustCanvasSize(canvas,x, y); ctx.drawImage(img,0,0, x, y); } img.src = source; } function adjustCanvasSize(canvas, x, y){ canvas.width = x; canvas.height = y; } 

 canvas{border:1px solid;} 

 <canvas id="Canvas"></canvas>