Cuando se crea una página web, habrá que acceder a recursos como imágenes, estas deben estar almacenadas en un servidor o en la máquina local.

Sin embargo, estos elementos no van a cargar de manera instantánea, por lo que hay que tener en cuenta el tiempo de carga y también las dimensiones de los diferentes elementos (Esto se da porque hay un evento que se dispara en ese momento)

var fondo = new Image();

En el ejemplo de esta clase se lleva a cabo la creación de nuevos objetos

<aside> 🔥 En programación, es una buena práctica definir un objeto con la primera letra en mayúscula

</aside>

En esta clase se creo un nuevo objeto para cargar imágenes. Se agregó la ruta a donde se encuentra el recurso y posteriormente se utilizó el evento "load" para cargar la imagen, usando a su vez, la función dibujar para que en el mapa aparezca en el canvas

var fondo = new Image();
fondo.src = mapa;
fondo.addEventListener("load", dibujar);

Sin embargo

La imagen solo se cargará en la página después del evento "load" cuando se llame la función dibujar

También hay que tener en cuenta de que canvas en su forma más conocida funciona como llas capas de photoshop, lo que hace que uno ponga las capas una encima de otra

A pesar de esto, si se generan los elementos gráficos de esta forma, puede que carguen en el orden deseado, como por ejemplo que el fondo cargue al después de todo o en la mitad, ocultando elementos que queremos visualizar

Para este caso

Lo correcto es crear una variable tile que indica que el objeto anterior ya cargó para dibujar el siguiente

Esto se hace agregando atributos extra a la imagen, en este caso, serán

Por lo tanto el código pasar de esto, a ser esto ⇒

var fondo = new Image();
fondo.src = mapa;
fondo.addEventListener("load", dibujar);
var vaca = new Image();
vaca.src = "vaca.png";
vaca.addEventListener("load", dibujarVacas);
var cerdo = new Image();
cerdo.src = "cerdo.png";
cerdo.addEventListener("load", dibujarCerdos);
var pollo = new Image();
pollo.src = "pollo.png";
pollo.addEventListener("load", dibujarPollos);

var fondo = new Image();
fondo.src = mapa;
fondo.addEventListener("load", cargarFondo);
var vaca = new Image();
vaca.src = "vaca.png";
vaca.addEventListener("load", cargarVacas);
var cerdo = new Image();
cerdo.src = "cerdo.png";
cerdo.addEventListener("load", cargarCerdos);
var pollo = new Image();
pollo.src = "pollo.png";
pollo.addEventListener("load", cargarPollos);

<aside> 💡 Estas nuevas funcionas se agregan para indicar que la carga ya está lista y se optimiza el código teniendo una sola opción de dibujar

</aside>

También se modificaron las variables por objetos literales o variables con la sintaxis de Json

var vaca = {
    url: "vaca.png",
    cargaOK: false
};

De acá la url indica la ubicación de donde se encuentra este objeto, mientras que cargaok indica por medio de un booleano si ha cargado o no

nota: en este ejemplo se usa una definición de un objeto literal, lo cual es muy similar a como funcion Json