初歩的だけどたまにやる間違い

　しばらく（半年以上？）javascriptから遠ざかっていたので、基本的なことをすっかり忘れてしまっています。今日も、「なんでこんなとこで……」というところでハマッてしまいました。

　そのハマりというのが例えば下のコード。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

　これをこのまま読み込ませてしまうと、getContextという関数は存在しないと怒られてしまいます。これ、原因は1行目でcanvasというidの要素が取得できていないからなのです。たぶん、htmlソースがまだ完全に読み込まれていない状態なので、要素が取得できず空のオブジェクトが出来てくる。だからエラーが出るのですね。

　普通、こんな間違いをする人は居ないでしょうが、もしいらっしゃいましたら、window.onload = function(){...ここに処理を記述};という風にかけば大丈夫です。