javascript コードの解釈について

<canvas>タグにjavascriptの画像を読み込ませ、テキストを入力するプログラムを、ネットの記事を参照して下記コードを書きました。

HTML
1<body onload="loadImage('preview');">
2<div class="col-md-8">
3  <p><canvas id="preview"></canvas></p>
4    <p>
5       <input type="text" id="canvas_text" value="我輩は犬である">
6       <button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
7    </p>
8</div>
9</body>

javascript
1    //キャンバスに画像を描画する
2    function loadImage(id) {
3        //画像を読み込んでImageオブジェクトを作成する
4        let image = new Image();
5        image.src = 'images/canvas.png';
6        image.onload = (function() {
7            //画像ロードが完了してからキャンバスの準備をする
8            let canvas = document.getElementById(id);
9            let ctx = canvas.getContext('2d');
10            //キャンバスのサイズを画像サイズに合わせる
11            canvas.width = image.width;
12            canvas.height = image.height;
13            //キャンバスに画像を描画（開始位置0,0）
14            ctx.drawImage(image, 0, 0);
15        });
16    }
17    //キャンバスに文字を描く
18    function drawText(canvas_id, text_id) {
19        let canvas = document.getElementById(canvas_id);
20        let ctx = canvas.getContext('2d');
21        let text = document.getElementById(text_id);
22        //文字のスタイルを指定
23        ctx.font = '32px serif';
24        ctx.fillStyle = '#404040';
25        //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
26        ctx.textBaseline = 'center';
27        ctx.textAlign = 'center';
28        //座標を指定して文字を描く（座標は画像の中心に）
29        let x = (canvas.width / 2);
30        let y = (canvas.height / 2);
31        ctx.fillText(text.value, x, y);
32    }

ブラウザが読み込まれたら、 function loadImage(id)のscript処理が実行されて画像が表示され、入力したテキストが画像に表示されます。

2点解釈できていないscriptコードがあります。

javascript
1        image.onload = (function() {
2            //画像ロードが完了してからキャンバスの準備をする
3            let canvas = document.getElementById(id);
4            let ctx = canvas.getContext('2d');
5            //キャンバスのサイズを画像サイズに合わせる
6            canvas.width = image.width;
7            canvas.height = image.height;
8            //キャンバスに画像を描画（開始位置0,0）
9            ctx.drawImage(image, 0, 0);
10        });

上記コードは　image.onload に　以降の　function()処理結果を代入。しているのだと思うのですが、image.onloadは代入された関数の処理をどこに渡しているのでしょうか？　　image.onloadの役割がわかりません。。。

また、下記コードの部分は、let ctx にdrawImage()関数を実行　という解釈でいいでしょうか？

javascript
1//キャンバスに画像を描画（開始位置0,0）
2  ctx.drawImage(image, 0, 0);

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

回答1件

ベストアンサー

上記コードは　image.onload に　以降の　function()処理結果を代入。しているのだと思うのですが、image.onloadは代入された関数の処理をどこに渡しているのでしょうか？　　image.onloadの役割がわかりません。。。

この文章内に2種類の質問があるように見えます。

** 1. image.onloadの役割がわかりません。。。**

要素（今回は画像要素）がload(読み込み)されたら処理を実行するという役割です。
これは調べれば（質問者様もなんとなくわかっているとは思いますが）詳しくわかるはずです。

** 2. function()処理結果を代入しているのだと思うのですが、image.onloadは代入された関数の処理をどこに渡しているのでしょうか？**

代入しているのはfunctionそのものであり、処理結果ではありません。
画像読み込み後に実行させたい関数本体を渡しています。

画像が読み込まれたらimg.onloadが実行されます。これはWeb APIの実装なのでそういうものです。そのonloadにfunction(){~}を代入しました。なので結果的にその関数が実行されることになります。

(ちなみに<body onload="loadImage('preview');">については疑問に思わなかったのでしょうか？)

また、下記コードの部分は、let ctx にdrawImage()関数を実行　という解釈でいいでしょうか？

概ね正しいですが、「ctxのdrawImageメソッドを実行」という方が正しいと思います。

投稿2021/11/22 07:57

k_a

総合スコア983

Fukusuke0604

2021/11/22 08:21 編集

回答ありがとうございます。 <body onload="loadImage('preview');"> によって、ブラウザが読み込まれたら、 function loadImage(id)の関数処理が実行され、画像が読み込まれたタイミングでimage.onload = 以降の関数が実行されて処理後の画像が出力されている。　という考えでいいでしょうか？