I am trying to draw hundreds of images onto a canvas, but only when I reference the specific image variable. I encountered a function created by someone responding to another one of these posts that I was using. It was something like map = createImage("images/Global/Map.png") and it would return the value I was able to draw like this: ctx.drawImage(map, 0, 0, 224, 292) instead of me having to do it in the onload function.
I guess what I am trying to ask is how would I create an object that would allow me to do this?
I tried something along the line of this:
const createImage = function(src) {
image = newImage();
image.src = src;
image.onload = function() {
return(image);
}
}
// Other code creating images...
var map = createImage("images/map.png");
// Code to draw map
ctx.drawImage(map, 0, 0, 224, 292);
Thanks in advance. I'm hoping its a simple problem.
I was an idiot and should not have been allowed to post this question. I was trying to do animations using canvas on javascript.
The thing that would have solved my problem (while it was never a problem to begin with) was the window.requestAnimationFrame(function()). As it kept animating, sooner or later the images would load and be drawn. To my eyes, it appeared as if it were instant, hence my wanting the program to wait until everything was loaded.
There was never a problem to begin with. Oops.