canvas drawImage no dibuja imágenes la primera vez

Estoy trabajando en un juego simple de JavaScript usando el lienzo HTML5. Es una configuración de bucle de juego muy típica que involucra:

función init () que inicializa los objetos que se utilizarán en el campo de juego, aleatorizando algunas posiciones iniciales x / y tareas de configuración similaresfunción draw () que dibuja todos los objetos del juego, incluidas algunas formas de lienzo simples y algunas imágenessetInterval para llamar a dibujar cada 25 milisegundos

Mientras comenzaba este proyecto, tuve la llamada setInterval al final de la función init (), por lo que simplemente comencé a dibujar y animar tan pronto como cargó la página, y todo funcionó bien. Ahora que estoy más avanzado, me gustaría dibujar un campo de juego estático completamente poblado en carga y luego usar un botón para iniciar el intervalo principal del bucle del juego. Así que agregué una sola llamada a draw () al final de init (), y el problema es que cuando hago esto, todas las formas del lienzo se dibujan correctamente, pero ninguna de las imágenes se muestra en el lienzo.

Elloshacer render si dejo que draw () se ejecute varias veces, como ...

    var previewDraw = setInterval(draw, 25);
    var stopPreviewDraw = function() { clearInterval(previewDraw) }
    setTimeout(stopPreviewDraw, 100)

... pero eso parece tonto. ¿Por qué no funciona una sola llamada a draw ()? He registrado los objetos en las consolas de Chrome y Firefox y todo sobre ellos se ve bien; ya tienen las rutas img src apropiadas e inician los valores x / y disponibles para asignar a la nueva imagen () que se crea y luego se llama a través de mi método canvas.2dcontext.drawImage ().

Estoy probando esto en Chrome 6 y Firefox 3.6.10 a medida que avanzo, y ambos me desconciertan con este comportamiento. No se muestran errores ni problemas en la consola de Chrome, pero si intento llamar a draw () solo una vez que Firefox arroje esto:

excepción no detectada: [Excepción ... "El componente devolvió el código de falla: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" ubicación: "marco JS ::http: // localhost / my-game-url / :: drawItem :: línea 317 "datos: no]

Mis búsquedas de Google para ese error sugieren una imagen corrupta, pero todas se abren en Vista previa y Photoshop sin ningún problema.

Respuestas a la pregunta(1)

Su respuesta a la pregunta