Can't figure out where to draw image in Javascript code

Question

I am having issues trying to place an image as an object for an "asteroid avoidance" game. I was able to get the game itself to work based on what was written in my book "Foundation: HTML5 Canvas for Games and Entertainment". I want to go one step beyond what was written in the book. I want to replace the triangle shaped ship with that of an image. However, I am unable to figure out where to put the code for this.draw. My professor showed us a way to do it. When I try to implement it into my code it doesn't want to work properly. May I ask for some advice on how to place the image as the ship?

Here is my working code from the book, before I made any this.draw edits:( http://jsbin.com/tukejopofo/1/ )

 $(document).ready(function() { var canvas = $("#gameCanvas"); var context = canvas.get(0).getContext("2d"); //canvas dimensions var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); var playGame; var asteroids; var numAsteroids; var player; var score; var scoreTimeout; var arrowUp = 38; var arrowRight = 39; var arrowDown = 40; var arrowLeft = 37; //game UI var ui = $("#gameUI"); var uiIntro = $("#gameIntro"); var uiStats = $("#gameStats"); var uiComplete = $("#gameComplete"); var uiPlay = $("#gamePlay"); var uiReset = $(".gameReset"); var uiScore = $(".gameScore"); var soundBackground = $("#gameSoundBackground").get(0); var soundThrust = $("#gameSoundThrust").get(0); var soundDeath = $("#gameSoundDeath").get(0); var Asteroid = function(x, y, radius, vX) { this.x = x; this.y = y; this.radius = radius; this.vX = vX; }; var Player = function(x, y) { this.x = x; this.y = y; this.width = 24; this.height = 24; this.halfWidth = this.width / 2; this.halfHeight = this.height / 2; this.flameLength1 = 20; this.flameLength2 = 20; this.vX = 0; this.vY = 0; this.moveRight = false; this.moveUp = false; this.moveDown = false; this.moveLeft = false; }; //Reset and start the game function startGame() { //Reset game stats uiScore.html("0"); uiStats.show(); //set up initial game settings playGame = false; asteroids = new Array(); numAsteroids = 10; score = 0; player = new Player(150, canvasHeight / 2, 50, 50); for (var i = 0; i < numAsteroids; i++) { var radius = 5 + (Math.random() * 10); var x = canvasWidth + radius + Math.floor(Math.random() * canvasWidth); var y = Math.floor(Math.random() * canvasHeight); var vX = -5 - (Math.random() * 5); asteroids.push(new Asteroid(x, y, radius, vX)); }; $(window).keydown(function(e) { var keyCode = e.keyCode; if (!playGame) { playGame = true; soundBackground.currentTime = 0; soundBackground.play(); animate(); timer(); }; if (keyCode == arrowRight) { player.moveRight = true; if (soundThrust.paused) { soundThrust.currentTime = 0; soundThrust.play(); } } else if (keyCode == arrowLeft) { player.moveLeft = true; } else if (keyCode == arrowUp) { player.moveUp = true; } else if (keyCode == arrowDown) { player.moveDown = true; } }); $(window).keyup(function(e) { var keyCode = e.keyCode; if (!playGame) { playGame = true; animate(); }; if (keyCode == arrowRight) { player.moveRight = false; if (keyCode == arrowRight) { player.moveRight = false; soundThrust.pause(); } } else if (keyCode == arrowUp) { player.moveUp = false; } else if (keyCode == arrowDown) { player.moveDown = false; } else if (keyCode == arrowLeft) { player.moveLeft = false; } }); //start the animation loop animate(); }; //initialize the game environment function init() { uiStats.hide(); uiComplete.hide(); uiPlay.click(function(e) { e.preventDefault(); uiIntro.hide(); startGame(); }); uiReset.click(function(e) { e.preventDefault(); uiComplete.hide(); $(window).unbind("keyup"); $(window).unbind("keydown"); soundThrust.pause(); soundBackground.pause(); clearTimeout(scoreTimeout); startGame(); }); }; function timer() { if (playGame) { scoreTimeout = setTimeout(function() { uiScore.html(++score); if (score % 5 == 0) { numAsteroids += 5; } timer(); }, 1000); }; }; //Animation loop that does all the fun stuff function animate() { //Clear context.clearRect(0, 0, canvasWidth, canvasHeight); var asteroidsLength = asteroids.length; for (var i = 0; i < asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; tmpAsteroid.x += tmpAsteroid.vX; if (tmpAsteroid.x + tmpAsteroid.radius < 0) { //creates bounderies to prevent player from leaving the canvas tmpAsteroid.radius = 5 + (Math.random() * 10); tmpAsteroid.x = canvasWidth + tmpAsteroid.radius; tmpAsteroid.y = Math.floor(Math.random() * canvasHeight); tmpAsteroid.vX = -5 - (Math.random() * 5); } var dX = player.x - tmpAsteroid.x; var dY = player.y - tmpAsteroid.y; var distance = Math.sqrt((dX * dX) + (dY * dY)); if (distance < player.halfWidth + tmpAsteroid.radius) { //checks for collision soundThrust.pause() soundDeath.currentTime = 0; soundDeath.play(); //Game over playGame = false; clearTimeout(scoreTimeout); uiStats.hide(); uiComplete.show(); soundBackground.pause(); $(window).unbind("keyup"); //unbinds keys to stop player movement at the end of the game $(window).unbind("keydown"); }; context.fillStyle = "rgb(255, 255, 255)"; context.beginPath(); context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI * 2, true); context.fill(); }; player.vX = 0; player.vY = 0; if (player.moveRight) { player.vX = 3; }; if (player.moveLeft) { player.vX = -3; }; if (player.moveUp) { player.vY = -3; }; if (player.moveDown) { player.vY = 3; }; player.x += player.vX; player.y += player.vY; if (player.x - player.halfWidth < 20) { player.x = 20 + player.halfWidth; } else if (player.x + player.halfWidth > canvasWidth - 20) { player.x = canvasWidth - 20 - player.halfWidth; } if (player.y - player.halfHeight < 20) { player.y = 20 + player.halfHeight; } else if (player.y + player.halfHeight > canvasHeight - 20) { player.y = canvasHeight - 20 - player.halfHeight; } if (player.moveRight) { context.save(); context.translate(player.x - player.halfWidth, player.y); if (player.flameLength1 == 20) { player.flameLength1 = 15; (player.flameLength2 == 20) player.flameLength2 = 15; } else { player.flameLength1 = 20; player.flameLength2 = 20; }; context.fillStyle = "orange"; context.beginPath(); context.moveTo(0, -12); context.lineTo(-player.flameLength1, -7); context.lineTo(0, -5); context.closePath(); context.fill(); context.fillStyle = "orange"; context.beginPath(); context.moveTo(0, 12); context.lineTo(-player.flameLength2, 7); context.lineTo(0, 5); context.closePath(); context.fill(); context.restore(); }; //draw ship context.fillStyle = "rgb(255, 0, 0)"; context.beginPath(); context.moveTo(player.x + player.halfWidth, player.y); context.lineTo(player.x - player.halfWidth, player.y - player.halfHeight); context.lineTo(player.x - player.halfWidth, player.y + player.halfHeight); context.closePath(); context.fill(); while (asteroids.length < numAsteroids) { //adds asteroids as the difficulty increases var radius = 5 + (Math.random() * 10) var x = Math.floor(Math.random() * canvasWidth) + canvasWidth + radius; var y = Math.floor(Math.random() * canvasHeight); var vX = -5 - (Math.random() * 5); asteroids.push(new Asteroid(x, y, radius, vX)); } if (playGame) { //run the animation loop again in 33 milliseconds setTimeout(animate, 24); }; }; init(); }); 

 * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } body { background: #000; color: #fff; font-family: Verdana, Arial, sans-serif; font-size: 18px; } h1 { font-size: 30px; } h6 { font-size: 15px; } p { margin: 0 20px; } a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } a.button { background: #185da8; border-radius: 5px; display: block; font-size: 30px; margin: 40px 0 0 350px; padding: 10px; width: 200px; text-align: center; } a.button:hover { background: #2488f5; color: #fff; text-decoration: none; } #game { height: 600px; left: 50%; margin: -250px 0 0 -500px; position: relative; top: 50%; width: 980px; } #gameCanvas { background: #001022; border: 5px solid green; background-image: url(../images/space.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; } #gameUI { height: 600px; position: absolute; width: 980px; } #gameIntro, #gameComplete { background: rgba(0, 0, 0, 0.5); margin: 100px 0 0 10px; padding: 40px 0; text-align: center; } #gameStats { font-size: 14px; margin: 20px 0; } #gameStats .gameReset { margin: 20px 20px 0 0; position: absolute; right: 0; top: 0; } 

 <body> <div id="game"> <div id="gameUI"> <div id="gameIntro"> <h1>Debris Fields of Spiral Galaxy</h1> <h6>A <i>Galaxy Smuggler's Run</i> Game</h6> <hr> <p>You are Captain Amadaeus delivering goods to a dependent planet on the other side of a debris field</p> <p>Click <i>"Play"</i> and then press any key to start.</p> <p><a id="gamePlay" class="button" href="">Play!</a> </p> </div> <div id="gameStats"> <p><b>Time: </b><span class="gameScore"></span> seconds</p> <p><a class="gameReset" href="">Reset</a> </p> </div> <div id="gameComplete"> <h1>Game Over!</h1> <p>You survived for <span class="gameScore"></span> seconds.</p> <p>Would you like to give it another go?</p> <p><a class="gameReset button" href="">Play Again?</a> </p> </div> </div> <canvas id="gameCanvas" width="980" height="600"> </canvas> <audio id="gameSoundBackground" loop> <source src="sounds/background.ogg"> <source src="sounds/background.mp3"> </audio> <audio id="gameSoundThrust" loop> <source src="sounds/thrust.ogg"> <source src="sounds/thrust.mp3"> </audio> <audio id="gameSoundDeath"> <source src="sounds/death.ogg"> <source src="sounds/death.mp3"> </audio> </div> </body> 

and here is my Professor's code for drawing an image:( http://jsbin.com/rapayufafe/1/ )

 // JS file for the ship function Ship() { this.x = 100; this.y = 100; this.color = "yellow"; this.fillStyle = "white"; this.vx = 0; this.vy = 0; this.ax = 1; this.ay = 1; //function "move" that will add velocity to the position of the ship this.move = function() { this.x += this.vx; this.y += this.vy; }//end move function //draw the ship this.draw=function () { //ship var var imageObj = new Image(); imageObj.src = "images/ship.png"; //save the current state of the canvas context.save(); //moving the point of origin (0,0) to the ships x and y coordinates context.translate(this.x,this.y); context.lineStyle = this.color; context.fillStyle = this.fillStyle; /*context.beginPath(); context.moveTo(25,0); context.lineTo(-25,25) context.lineTo(-25,-25)*/ //draw ship context.drawImage(imageObj,-25,-25,50,50); context.closePath(); context.stroke(); context.fill(); context.restore(); }//end of draw ship }//end ship function /*var asteroidsLength = asteroids.length; for (var i = 0; i < asteroidsLength; i++) { var tmpAsteroid = asteroids[i]; context.fillStyle = "gray"; context.beginPath(); context.arc(tmpAsteroid.x, tmpAsteroid.y, tmpAsteroid.radius, 0, Math.PI*2, true); context.closePath(); context.fill(); };*/ 

Answer 1

As you can see in your starting code, you have a section looking like this:

   //draw ship
    context.fillStyle = "rgb(255, 0, 0)";
    context.beginPath();
    context.moveTo(player.x + player.halfWidth, player.y);
    context.lineTo(player.x - player.halfWidth, player.y - player.halfHeight);
    context.lineTo(player.x - player.halfWidth, player.y + player.halfHeight);
    context.closePath();
    context.fill();

Just replace that code with the code for drawing an image.

var imageObj = new Image();
imageObj.src = "images/ship.png";
context.drawImage(imageObj,player.x,player.y);

Although, I'd recommend declaring the imageObj and setting the source at the top of your code where you declare the rest of your variables so that you don't load the image every time you want to draw the ship.