When working with drawing background on a canvas and adding small images on top of that background, I sometimes encounter an issue where the background is drawn over the small images. This behavior puzzles me. Can you shed some light on why this might be happening?
Here is the JavaScript code snippet for reference -
var canvasupdate = document.getElementById("myCanvas");
ctxupdate = canvasupdate.getContext("2d");
var background = new Image();
background.src = sitePath + "ATOM/chapter1/book/" + `bgimagename`;
background.onload = function() {
ctxupdate.drawImage(background, 0, 0); // set background image
};
var imageobj = new Array();
for (var d = 0; d < calloutImageArray.length; d++) // getting small images in array
{
imageobj[d] = new Image();
(function(d) {
imageobj[d].src = sitePath + "ATOM/chapter1/book/" + calloutImageArray[d];
imageobj[d].onload = function() {
ctxupdate.drawImage(imageobj[d], calloutImageArrayX[d], calloutImageArrayY[d], calloutImageArrayW[d], calloutImageArrayH[d]);
};
})(d);
}
I noticed that in the above code, the background image code should ideally be executed first followed by the small images code. However, there are instances where the small images code executes before the background image code. Any insights on why this sequence is not consistent?