Carregando imagens ao canvas

Pra quem tiver problema com a vaca não aparecer, certifiquem-se de colocar “./imgs/…” e colocar a pasta imagens dentro da pasta onde você salvou os arquivos html e js. A minha tava dando erro por não estar dentro da pasta e porque esqueci o . antes da /

Minha vaca não apareceu…

a minha vaca aparece em algumas vezes que regarrego e em outras nao.

Aula legal demais, deu tudo certo pra mim mas fiquei curioso em saber por que o JS é tão repetitivo. São muitas linhas para simplesmente chamar duas imagens. Acredito que seja por causa da funcionalidade de conseguir acrescentar eventos mas se somente precisasse do fundo e da vaca acho que iria fazer por html mesmo.

fundo.imagem = new Image ();
fundo.imagem.src = fundo.url;
vaca.imagem = new Image ();
vaca.imagem.src = vaca.url;

BOA AULA

otima aula

Boa aula!!

Muito bom! é gratificante ver que deu certo a fazendinha:) Feliz demais por ter aprendido tanto com essa aula

Desenhos!! Mais aprendizado!!

Eu não consegui fazer de primeira , porem eu baixei os arquivos para ver se dava certo e mesmo assim não deu certo
Oque eu faço agora?

Aquele momento em que o instrutor coloca “pqp” no código e você leva um susto: https://platzi.com/aulas/1641-programacao-basica/21673-carregando-imagens-ao-canv-5/?time=84

bacana!

nem sempre a vaca aparece primeiro que o fundo, é um evento aleatório, pq as vezes eu atualizo e ela fica na frente, e as vezes não
o Código:
(tem alguma forma de forçar o fundo a carregar sempre primeiro que a vaca?)

var canvas = document.getElementById("mycanvas");
var papel = canvas.getContext("2d");

var fundo = {
    url: "./imgs/fundo.png"
}

var vaca = {
    url: "./imgs/vaca.png"
}

fundo.imagem =  new Image();
fundo.imagem.src = fundo.url;
vaca.imagem =  new Image();
vaca.imagem.src = vaca.url;

fundo.imagem.addEventListener("load", cBk);
vaca.imagem.addEventListener("load", cCow);


function cBk(){
  papel.drawImage(fundo.imagem, 0, 0);
}

function cCow(){
  papel.drawImage(vaca.imagem, 50, 50);
}

function nrandom(x, y){
  return Math.floor(Math.random()*(y-x)+1) + x;

}

var z = 10

for(var i=0; i<z; i++){
  console.log(nrandom(100, 200))
}

Alguém sabe de algum material? Pq não entendi nada dessa aula