animacion - JavaScript no pudo ejecutar ''drawImage''

drawimage canvas

Question

Ok, estoy creando un juego con elementos Canvas de JavaScript y tal. He podido cargar en TONELADAS de imágenes, pero en algunas seleccionadas, JavaScript responde con errores tales como

Unkeught TypeError: no se pudo ejecutar ''drawImage'' en ''CanvasRenderingContext2D'': no ​​se encontró ninguna función que coincidiera con la firma provista.

¡Lo cual no tiene NINGÚN SENTIDO, porque el mismo código funciona en otros lugares!?!

Aquí hay un ejemplo que tengo en mi código:

board.drawImage(document.getElementById("player_explode"), this.x, this.y);

Dentro de un método de objetos, Player.die() , respectivamente.

¿Alguien sabe por qué está ocurriendo este comportamiento? Me estoy frustrando mucho ...

Aquí hay un JSFiddle para demostrar, al lado de todo el código. Player.die() se encuentra en la line[242] .

Answer 1

El problema era la forma en que estaba cargando mis imágenes, debería haber estado haciendo:

var image = new Image();
image.src = "imagesource.jpg";

Pero en cambio, obtuve los elementos por id desde la página del document .

Recursos:

Explicación al cargar imágenes

Explicación sobre cómo html carga imágenes

Answer 2

deberías esperar a que todos los elementos carguen, hazlo así:

window.onload=function(){
       board.drawImage(document.getElementById("player_explode"), this.x, this.y);
}