Draw the SpaceShip

In order to draw a spaceship on our canvas, we first need a way to refer to the canvas web page element in our JavaScript code, so that we may call drawing commands to affect the canvas.

Obtaining the Canvas and Drawing Context

Open main.js in your code editor, and add the following lines of code as indicated in yellow:

If you did everything correctly, you should see an output in the console similar to as shown below:

The console showing that the variables canvas and c are correctly initialized

If you don't see an output like the one above, then your variables canvas and c were not captured correctly in lines 11 and 12. Once you see the correct output in the JavaScript console, we are ready to use our variables canvas and c to draw shapes on our HTML canvas element.

Drawing a Line

We are first going to try drawing a line before attempting to draw the spaceship. Open main.js in your code editor, and add the following lines of code as indicated in yellow:

Go back to your web browser and refresh the page. If you typed the code in correctly, you should see a result that looks like this:

The canvas element showing that the drawLine() function successfully drew a line.

Drawing the SpaceShip

We are now going to put the code for drawing a spaceship into its own function.

Open main.js in your code editor, and add the following lines of code as indicated in yellow:

If you wrote the code correctly, you should see the following output on the canvas:

The canvas element showing that we successfully drew the space ship
four times using the drawShip() function.

Now, in the next module, we're going to make the ship move!