addEventListenerのloadイベントが発火しない

以下のtest.phpの試行ボタンを押すと、canvas画面に変わり画像が描画されるようにしたいです。

php
1<!doctype html>
2<html lang="jp">
3<head>
4	<meta charset="utf-8">
5</head>
6<body>
7	<?php
8		if(isset($_POST['post'])&&($_POST['post']==='test'))
9		{
10	?>
11			<canvas></canvas>
12	<?php
13		} else
14		{
15	?>
16			<form action="" method="post">
17				<button type="submit" name="post" value="test">試行</button>
18			</form>
19	<?php
20		}
21	?>
22</body>
23<footer>
24	<script>
25		function Init(event)
26		{
27			var cntx = this.getContext('2d');
28			var img = new Image();
29			img.onload = function()
30			{
31				cntx.drawImage(img, 0, 0);
32			}
33			img.src = "http://img.moeimg.net/wp-content/uploads/archives/6739/1_91209xfvjw.jpg";
34		}
35		var elms = document.getElementsByTagName('canvas');
36		elms = [].slice.call(elms);
37		var cols = document.querySelectorAll('canvas');
38		[].forEach.call
39		(cols, function(col)
40				{
41					col.addEventListener('load', Init, false);//発火しない
42					//col.addEventListener('DOMContentLoaded', Init, false);//発火しない
43					//col.addEventListener('pointerenter', Init, false);//発火する
44				}
45		);
46	</script>
47</footer>
48</html>

しかし、コード内のコメントにあるように、addEventListenerのイベントをloadにした場合やloadではなくDOMContentLoadedには発火せず、Init関数が起動しません。
ただ、pointerenterのようなマウスイベント系はInit関数が起動し画像が想定通り表示されます。

従って、html/php部分には問題がないように見受けられるのですが、どうしてloadもしくはDOMContentLoadedでは画像が表示されないのかが分かりません。
どうしてもマウスオーバーなどをさせないで（ボタンが押されることによって）test.phpが再読み込みされたときに画像を表示させたいのですが、どうしたらよいでしょうか？

ご教示いただけますと幸いです。

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

回答2件

canvasにloadイベントが無いからです。documentのイベントに登録しましょう。

【DOMContentLoaded - Web 技術のリファレンス | MDN】
https://developer.mozilla.org/ja/docs/Web/Reference/Events/DOMContentLoaded#%E4%BE%8B

投稿2018/10/29 05:52

kei344

総合スコア69398

Null0lluN

2018/10/29 07:58 編集

ありがとうございます。しかし、documentに登録すると今度はthis.getContext('2d');でエラーが出ました。 thisはdocument（window）を指しておりcanvasではないのでエラーが出るのは当たり前なのですが。かといって、どう修正すればいいのかが分かりません。

Null0lluN

2018/10/29 07:57

高評価を押させていただきました。改めてありがとうございました。

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

自己解決

JavaScript部分を以下に書き換えることで解決しました。

JavaScript
1		function Init(i)
2		{
3			var cntx = cols[i].getContext('2d');
4			var img = new Image();
5			img.onload = function()
6			{
7				cntx.drawImage(img, 0, 0);
8			}
9			img.src = "http://img.moeimg.net/wp-content/uploads/archives/6739/1_91209xfvjw.jpg";
10		}
11		var i = 0;
12		var elms = document.getElementsByTagName('canvas');
13		elms = [].slice.call(elms);
14		var cols = document.querySelectorAll('canvas');
15		[].forEach.call
16		(cols, function(col)
17				{
18					Init(i);
19
20					i++;
21				}
22		);
23