【JavaScript】canvas Cannot read property ‘getContext’ of nullの解決方法

【JavaScript】canvas Cannot read property 'getContext' of nullの解決方法 JavaScript

今回はjsの「canvas Cannot read property ‘getContext’ of null」というエラーの対処法を紹介します。canvasを使う時に出るエラーですね。

 

スポンサーリンク

エラーの原因

原因は<script>を読み込んだ時点では<body>以下の要素が読み込まれていないためです。

<head>内でスクリプトを読み込んだ時点ではまだ要素が生成されていないため、「Cannot read property」と言われてしまうわけですね。

 

エラーの対処法

対処法は2つあります。

  • jsを</body>の直前で読み込む(終了タグの直前で読み込む)
  • jsファイルをdocument.addEventListener('DOMContentLoaded', function() {~});で囲み、DOMが生成されてからjsが動作するようにする

2番目のやり方が個人的にいいと思います。

似たようなエラーを起こさないためにもjsは毎回DOMContentLoadedしてから読み込むようにするといいですね。