.onloadを使用しないと画像が表示されない理由が知りたい

前提・実現したいこと

以下のコードでmizugi.JPGという画像をcanvas上に表示させたいのですが、コード最後のchara.onloadの部分をconst testという関数に変えて、その後test();で関数を呼び出そうとすると何故か画像が表示されません。
検証を使用してもエラーは出ませんでした。
onloadを使用すれば何も問題はないのですが、onloadを用いてプロパティを実行させることと、定義した関数を呼び出すことの違いが知りたいです。

該当のソースコード

HTML
1<body>
2    <canvas id="board" width="460" height="460"></canvas>
3
4<script>
5
6 
7  const board = document.querySelector("#board"); 
8  const ctx = board.getContext("2d");
9
10 
11  const chara = new Image();
12  chara.src = "mizugi.JPG"; 
13  chara.onload = () => {
14    ctx.drawImage(chara, 0, 0,230,340);
15  };
16
17</script>
18</body>

行動規範の内容に同意します

回答2件

ベストアンサー

chara.onloadでは当然charaのロードが完了した時点で呼び出されるのでうまくいくけど、charaのロードも完了していないうちにいきなりtestを実行して、その中でdrawImageしても、パラメーターとして与えているcharaはまだロードが完了していないため期待通りに描画されないのではないでしょうか。

投稿2021/06/26 12:07

編集2021/06/26 12:08

itagagaki

総合スコア8402

bob-kitchin

2021/06/26 12:18 編集

回答ありがとうございます。申し訳ありませんが、理解できない点が１つあります。 Javascriptのコードは、上から順に実行されますよね。もし、testという関数が const chara = new Image();　と　chara.src = "mizugi.JPG"; よりも上の行に書かれているならばロードが完了していないというのも理解できます。しかし、その２つのコードよりも下に書かれているのにも関わらずロードが完了してないというのが、よくわかりません。画像のロードと実行の順番は、関係がないということでしょうか。

maisumakun

2021/06/26 12:21 編集

> 画像のロードと実行の順番は、関係がないということでしょうか。 JavaScriptのコードは（普通に書くと）画像のロードを待たずに進行していきます。ダウンロードはJavaScriptの実行と比べてはるかに長い時間がかかるので、「ダウンロードが終わってから」実行したい場合にあえて指示する形となっています。

bob-kitchin

2021/06/26 12:22

ありがとうございます。基本的には、Javascriptのコードの実行がすべて終了→画像をロードするという順番なのですね。

itagagaki

2021/06/26 12:48

ちょっと違います。 chara.src = "mizugi.JPG"; このコードが実行されることにより画像のロードがスタートします。この処理は非同期です。スクリプトはロードが終わるのを待たず次の処理に進みます。なので、たとえば次の行ですぐにdrawImage()を呼び出してもダメなのです。そこでロードが終わったときに行いたいことをonload()に記述するわけです。こちらに書かれていますので一読を。画像を使う - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Canvas_API/Tutorial/Using_images

行動規範の内容に同意します