Problema de carga al usar Canvas con JS

Hola a todos, estoy trabajando con la etiqueta canvas para intentar hacer un pequeño juego para el navegador, pero cuando he de usar la etiqueta HTML y los métodos (drawImage(), etc), da ciertos tipos de problemas varios dependiendo del navegador y si el cache del navegador esta limpio:

· Las imágenes no cargan en algunos navegadores a la primera hasta que refresco la pagina.

· Las imágenes se cargan en los identificadores que no son llamados a ser dibujados, quedando el identificador escogido vació.

· Ninguna de las imágenes se carga en sus identificadores.

El código lo he repasado durante dos días y todo esta aparentemente correcto, he llegado hasta el punto de simplificar el problema en un código muy sencillo, que probando incluso en el editor de la w3school daba el mismo problema en IE, Firefox, Chrome y Opera.

Este es el código de ejemplo del problema:

http://pastebin.com/WJc0hCHW

El código del juego es muy similar al ejemplo anterior, se trata de cargar primero las posiciones en el documento con la etiqueta canvas y sus identificadores, para que luego sean dibujadas con drawImage() y así pueda obtenerlas más adelante y manejar las para hacer colisiones.

Sigo probando posibles soluciones, hasta el momento he mirado cosas relacionadas con la carga de las imágenes al finalizar la carga de la pagina, incluso de mantener un refresco continuado para ver si las imágenes eran cargadas en algún momento, nada de esto ha solucionado el problema manteniendo los tres casos antes expuestos.

Saludos.

...pues mi estimado, mira te hice un ajuste y funciona perfecto en todos los navegadores, basicamente el problema que tenes con el codigo original es con la declaracion de variables, recuerda que JavaScript no tienen block scope, y eso te esta trayendo problemas....

mira como queda aca http://jsbin.com/aqotab/15/edit

Hola ipraetoriux, muchas gracias por contestar, me ha ayudado en parte tu respuesta, al menos he conseguido dar con el punto donde se genera el problema pero no la solución.

Parte del problema anterior ya esta solucionado, pero el problema real es que no puedo cargar con drawImage() en diferentes canvas con diferentes identificadores las imágenes en ellos, directamente recorre todo un bucle for que tengo para cargar todas las imágenes y solo carga la ultima de ellas, otro ejemplo sobre esto seria este pequeño código que adjunto:

http://jsbin.com/awisif/2/edit

En el ejemplo del código intento cargar dos imágenes por un bucle for con arrays, pero solo carga la ultima imagen del array.

Creo que este problema pasa por que drawImage() de alguna manera tiene que ser persistente, por lo que si manda dibujar algo diferente el espacio en memoria que ocupa la imagen es reemplazado por el nuevo, por eso solo muestra en la ultima posición la ultima imagen cargada.

Lo que intento y busco conseguir es que cargue todas las imágenes usando un drawImage(), por que si quiero crear imágenes dinámicas no puedo si tengo que declarar cada imagen junto a un drawImage().

He mirado un ejemplo de "galería de arte" que tiene la documentación de Firefox acerca de drawImage sobre la carga de varias imágenes, es muy parecido a esto lo que intento conseguir, lo que pasa es que el código de ejemplo que acompaña hay partes que no comprendo por que las hace y creo que no se ajusta a lo que necesito del todo.

https://developer.mozilla.org/es/docs/Canvas_tutorial/Usar_im%C3%A1genes

Un saludo y muchas gracias.

...haber mi amigo, ahi le hice un cambio, lo que haces es crear un objeto Image() para cada imagen, defines su src y lo almacenas en un array, luego solo recorres el array y listo...

http://jsbin.com/awisif/35/edit

...ahhh me olvide, tendrías que crear una función que lance la carga de imágenes ni bien termina de cargar la web, ahora en el jsbin le das Run with JS y funciona perfecto...

Hola Ipraetoriux, muchas gracias por ayudarme, al final lo he conseguido con tus aclaraciones y el resultado es más o menos el que esperaba, aun me quedan por pulir algunas cosas, pero el haber salido de esto ya es suficiente.

http://img594.imageshack.us/img594/410/sinttulo3cl.jpg

Por lo que entiendo al menos con el uso de canvas es que hace falta crear el mismo objeto image() cada vez que vaya a cargar una imagen, además de que por lo que veo tanto IE como Opera si no se les carga después de la función de llamada al objeto Image() la "variable.src" no muestran la imagen, más o menos así es como lo he entendido.

Muchas gracias por tu tiempo Ipraetoriux, un gusto contar con gente tan amable y que enseñe tan bien como tu.

Un abrazo.