javascriptでシューティングゲームを作っていたらエラーが出ました。

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

エラーメッセージ
shooting.js:13 Uncaught TypeError: Cannot read property 'getContext' of null
    at window.onload (shooting.js:13)

###該当のソースコード
javascript

"use strict"
// 全体で使用する変数を定義
var canvas, ctx;
// プレイヤーの画像を保持する変数を定義
var img_player;
// 敵キャラの画像を保持する変数を定義
var img_enemy;

// ページロード時に呼び出される処理を指定
window.onload = function() {
    // コンテキストを取得（おまじない）
    canvas = document.getElementById('screen');
    ctx = canvas.getContext('2d');

    // Playerの画像（id='player'で指定された<img>）を取得
    img_player = document.getElementById('player');
    // 敵キャラの画像（id='enemy'で指定された<img>）を取得
    img_enemy = document.getElementById('enemy');

    // Playerの画像を (20, 50) の位置に描画
    ctx.drawImage(img_player, 20, 50);
    // 敵キャラの画像を (30, 60) の位置に描画
    ctx.drawImage(img_enemy, 30, 60);
};

html
1
2<!DOCTYPE html>
3<meta charset="UTF-8">
4<title>game</title>
5<style>
6  body {
7    background: #eee;
8  }
9  canvas {
10    background: #000;
11    display: block;
12    margin: auto;
13  }
14</style>
15<img id="player" src="img/player.png">
16<img id="enemy" src="img/enemy.png">
17<img id="player_bullet" src="img/player_bullet.png">
18<img id="enemy_bullet" src="img/enemy_bullet.png">
19<canvas width='240' height='320'></canvas>
20<script src="js/shooting.js"></script>
21

###試したこと
ネットのサンプルプログラムを試したんですがダメでしたお願いします。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
環境crhome

kei344

2017/08/07 15:39

質問文のエラーとコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

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

回答1件

ベストアンサー

HTMLが記載されてないので確信はありませんが、

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8" />
5<script type="text/javascript">
6	"use strict"
7	// 全体で使用する変数を定義
8	var canvas, ctx;
9	// プレイヤーの画像を保持する変数を定義
10	var img_player;
11	// 敵キャラの画像を保持する変数を定義
12	var img_enemy;
13
14	// ページロード時に呼び出される処理を指定
15	window.onload = function() {
16	// コンテキストを取得（おまじない）
17	canvas = document.getElementById('screen');
18	ctx = canvas.getContext('2d');
19
20	// Playerの画像（id='player'で指定された<img>）を取得
21	img_player = document.getElementById('player');
22	
23	// 敵キャラの画像（id='enemy'で指定された<img>）を取得
24	img_enemy = document.getElementById('enemy');
25
26	// Playerの画像を (20, 50) の位置に描画
27	ctx.drawImage(img_player, 20, 50);
28	
29	// 敵キャラの画像を (30, 60) の位置に描画
30	ctx.drawImage(img_enemy, 30, 60);
31	};
32</script>
33</head>
34<body>
35<canvas id="screen"></canvas>
36<img id="player" src="./player.png" style="display:none" />
37<img id="enemy" src="./enemy.png" style="display:none" />
38</body>
39</html>