canvas drawImage não desenha imagens pela primeira vez

Estou trabalhando em um jogo simples de JavaScript usando a tela HTML5. É uma configuração de loop de jogo muito típica, envolvendo:

Função init () que inicializa objetos a serem usados no campo de jogo, randomizando algumas posições x / y iniciais e tarefas de configuração semelhantesfunção draw () que desenha todos os objetos do jogo, incluindo algumas formas simples de tela e algumas imagenssetInterval para chamar desenhar a cada 25 milissegundos

Ao iniciar esse projeto, eu tive a chamada setInterval no final da função init (), então ele começava a desenhar e animar assim que você carregava a página, e tudo funcionava bem. Agora que estou mais adiantado, gostaria de desenhar um campo de jogo estático e totalmente preenchido em carga e depois usar um botão para iniciar o intervalo do loop do jogo principal. Então, adicionei uma única chamada para draw () no final do init (), e o problema é que, quando faço isso, todas as formas da tela são desenhadas corretamente, mas nenhuma das imagens é renderizada na tela.

ElesFaz renderize se eu deixar o draw () rodar algumas vezes, como ...

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

... mas isso parece idiota. Por que uma única chamada para draw () não funciona? Registrei os objetos nos consoles do Chrome e Firefox e tudo parece bem; eles já têm os caminhos img src apropriados e iniciam os valores x / y disponíveis para serem atribuídos à nova Image () que é criada e depois chamada pelo meu método canvas.2dcontext.drawImage ().

Estou testando isso no Chrome 6 e no Firefox 3.6.10, enquanto ambos estão me intrigando com esse comportamento. Nenhum erro ou problema é exibido no console do Chrome, mas se eu tentar chamar draw () apenas quando o Firefox lançar isso:

exceção não capturada: [Exceção ... "O componente retornou o código de falha: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" local: "quadro JS:http: // localhost / my-game-url / :: drawItem :: line 317 "dados: não]

Minhas pesquisas no Google por esse erro sugerem uma imagem corrompida, mas todas elas abrem no Preview e no Photoshop sem problemas.

questionAnswers(1)

yourAnswerToTheQuestion