Les indexo el código
var villaplatzi = document.getElementById("villaplatzi");
var ctx = villaplatzi.getContext("2d");
var fondo = {
url:"tile.png",
cargaOK: false,
}
var pollo = {
url: "pollo.png",
cargaOK: false,
}
var cerdo = {
url: "cerdo.png",
cargaOK: false,
}
var vaca = {
url: "vaca.png",
cargaOK: false,
}
var teclasVaca = {
arriba: 38,
abajo: 40,
izquierda: 37,
derecha: 39,
}
fondo.imagen = new Image();
fondo.imagen.src=fondo.url;
fondo.imagen.addEventListener("load",cargarFondo);
pollo.imagen = new Image();
pollo.imagen.src=pollo.url;
pollo.imagen.addEventListener("load",cargarPollo);
cerdo.imagen=new Image();
cerdo.imagen.src=cerdo.url;
cerdo.imagen.addEventListener("load",cargarCerdo);
vaca.imagen = new Image();
vaca.imagen.src=vaca.url;
vaca.imagen.addEventListener("load",cargarVaca);
function cargarFondo()
{
fondo.cargaOK=true;
dibujarImagen;
}
function cargarPollo()
{
pollo.cargaOK=true;
dibujarImagen;
}
function cargarCerdo()
{
cerdo.cargaOK=true;
dibujarImagen;
}
function cargarVaca()
{
vaca.cargaOK=true;
dibujarImagen;
}
function dibujarImagen()
{
if(fondo.cargaOK)
{ctx.drawImage(fondo.imagen,0,0);}
if(pollo.cargaOK)
{ctx.drawImagen(pollo.imagen,40,40)}
if(cerdo.cargaOK)
{ctx.drawImage(cerdo.imagen,80,80);}
if(vaca.cargaOK)
{ctx.drawImage(vaca.imagen,20,20);}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Villa Platzi</title>
</head>
<body>
<canvas width="500"height="500"id="villaplatzi"></canvas>
<script src="platzi.js"></script>
</body>
</html>
Agradezco la ayuda de antemano.