JSのcanvasについてです

Question

JSのcanvasについてです。

以下のコードのように書いても画像は表示されないままでした。
しかし、下のdraw関数の中に

requestAnimationFrame(draw);
```を書き足すと
なぜか画像が正常に表示されるようになりました。

でもほかの人のコードを見るとrequestAnimationFrame(draw);を書かなくてもしっかり表示されてた気がします。そのため、なぜ自分の場合は上のコードを入れないといけないのか解説をお願いいたします。

```js
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

// load images
var bg = new Image();
bg.src = "images/bg.png";

// draw images
function draw(){
    ctx.drawImage(bg,0,0);
}

draw();

Comments

[Lhankor_Mhy]

3点補足願います。

1.エラーメッセージはありますか？
2.「正常に表示されない」とのことですが、どのように異常なのでしょうか。
3.このスクリプトはDOMの読み込みが終わってから実行されていますか？

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

[prog.henry]

説明不足で申し訳ございません。

エラーは発生しませんでした。しかし画像は表示されませんでした。なにか画像が異常に表示されたとかではなく、単純に表示されませんでした。

Google Chromeのバージョンにもよるものなのでしょうか？

[Lhankor_Mhy]

3番目の補足依頼
「このスクリプトはDOMの読み込みが終わってから実行されていますか？」
についてはいかがですか？

[prog.henry]

いえ、そのようなコードは書いていません。

[Lhankor_Mhy]

分かりにくくて申し訳ないですが、ターゲットのHTMLが読み込まれてから、スクリプトが実行されていますか？ということをお聞きしています。

つまり、ターゲットのHTMLとそのスクリプト、どちらが先に書かれていますか、ということです。

[prog.henry]

htmlのほうが先に書かれていました。

恐らく画像がまだロードされていなかったがために、画像を表示しようとしても、表示できなかったのが原因だと思います。

だからrequestAnimationFrame(draw);でdraw関数をずっとループさせると、最初こそは画像が表示されないが、ロード後に画像が表示されるのだと思いました。

そのため、画像をロードしてから表示させるようにすると通常のようにうまくいきました。丁寧な対応をありがとうございました！これからは質問は詳しく書くように心がけたいと思います。

[Lhankor_Mhy]

ご解決されて何よりです。
お手数ですが、自己解決の手続きをお願いします。
https://teratail.com/help#resolve-myself

Answer 1

画像のロードを待ってから実行すればいけました。ありがとうございました。