Canvas Won't Load

Question

My canvas won't load. I've been messing around with the javascript and trying document.write() in my javascript but it won't print anything out onto the screen. I think that the HTML isn't connected to the javascript. The canvas should be showing a background of mars and an image of a rover that can move around. Also the variable nasa_mars_images_array is a list of images. In the javascript, I don't know why, but the browser is throwing out an error saying that it can make sense of what getContext means, but that just sounds wrong. I'm a beginner coder.

Here's my 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>
<script src="main.js"></script> 
<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>
</body>
</html>

This is my 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 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(); 
    } 
}

_“the browser is throwing out an error saying that it can make sense of what getContext means”_ — Is the error “TypeError: Cannot read property `getContext` of null”? `getContext` isn’t the problem. Read the error again: what is `null`? `canvas` is. _“I think that the HTML isn't connected to the javascript.”_ — If this was true, you’d see a network error in the console and the Network tab in your dev tools would show a 404 HTTP status. — Sebastian Simon, Sep 12 '21 at 17:23
Thank you. You are probably right i will check later. Maybe the images are also not in the folder. — Ethan Reese Wagner, Sep 12 '21 at 22:02

Canvas Won't Load

0 Answers0