Canvas无法加载，浏览器报getContext相关错误如何解决？

问题根因 #

• 脚本加载时机错误：main.js在<head>标签内引入，执行时<body>中的canvas元素还未完成渲染，document.getElementById("myCanvas")返回null，调用null的getContext方法就会抛出无法识别的错误，同时也会导致后续所有JS逻辑失效。
• 代码小缺陷：键盘事件判断中keyCode是数字类型，当前代码用字符串匹配虽然可运行但不规范；缺少down方向的移动函数实现。
• 资源路径依赖：需要保证所有用到的图片资源都和HTML文件放在同级目录，否则会出现图片加载失败的问题。

修复方案 #

1. 调整main.js的引入位置，将<script src="main.js"></script>从<head>内移动到</body>标签之前，确保JS执行时DOM已经全部加载完成。
   修改后的index.html代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
body{
    background-image: url("mars.gif");
    background-position: center;
    background-size: cover;
}
#myCanvas
{
    border-width:10px;
    background-color: white;
    border-style:ridge;
}

h1,h4
{
    color: white !important;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<title>Moving Rover On</title>
</head>
<body onload="add()">
<center>
<h1>Moving Rover On Mars</h1>
<h4>
    <b>NOTE : </b> IF ROVER IS NOT VISIABLE PRESS ANY ARROW KEY
</h4>
<canvas id="myCanvas" width="800" height="600"></canvas>    
</center>
<script src="main.js"></script> 
</body>
</html>

2. 补充main.js中的down函数，修正keyCode匹配逻辑：
   修改后的main.js代码如下：

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

var nasa_mars_images_array = ["nasa_image_1.jpg","nasa_image_2.jpeg", "nasa_image_3.jpg","nasa_image_4.jpg"];
var random_number = Math.floor(Math.random() * 4);
console.log(random_number);
var rover_width = 100; 
var rover_height = 90;
var background_image = nasa_mars_images_array[random_number];
console.log("background_image = " + background_image);
var rover_image = "rover.png";
var rover_x = 10;
var rover_y = 10;

function add() {
    background_imgTag = new Image();
    background_imgTag.onload = uploadBackground; 
    background_imgTag.src = background_image;
    rover_imgTag = new Image();
    rover_imgTag.onload = uploadrover;
    rover_imgTag.src = rover_image;
}

function uploadBackground() {
    ctx.drawImage(background_imgTag, 0, 0, canvas.width, canvas.height); 
}

function uploadrover() {
    ctx.drawImage(rover_imgTag, rover_x, rover_y, rover_width, rover_height); 
}

window.addEventListener("keydown", my_keydown);

function my_keydown(e) { 
    keyPressed = e.keyCode; 
    console.log(keyPressed); 
    if(keyPressed == 38) { 
        up(); 
        console.log("up"); 
    }
    if(keyPressed === 40) { 
        down(); 
        console.log("down"); 
    } 
    if(keyPressed === 37) { 
        left(); 
        console.log("left"); 
    } 
    if(keyPressed === 39) { 
        right(); 
        console.log("right"); 
    } 
}

function up() { 
    if(rover_y >=0) { 
        rover_y = rover_y - 10; 
        console.log("When up arrow is pressed, x = " + rover_x + " | y = " +rover_y); 
        uploadBackground(); 
        uploadrover(); 
    } 
}

function down() { 
    if(rover_y <= 510) { 
        rover_y = rover_y + 10; 
        console.log("When down arrow is pressed, x = " + rover_x + " | y = " +rover_y); 
        uploadBackground(); 
        uploadrover(); 
    } 
}

function left() {
    if(rover_x >= 0) {
        rover_x =rover_x - 10; 
        console.log("When left arrow is pressed, x = " + rover_x + " | y = " +rover_y); 
        uploadBackground(); 
        uploadrover(); 
    } 
}

function right() { 
    if(rover_x <= 700) { 
        rover_x =rover_x + 10; 
        console.log("When right arrow is pressed, x = " + rover_x + " | y = " +rover_y); 
        uploadBackground(); 
        uploadrover(); 
    } 
}

内容的提问来源于stack exchange，提问作者pinniporker