Canvas not drawing image from spritesheet <p>Ok So I have managed to draw one image that is the player, but Now I am trying to draw an enemy and it just wont work. I have added alerts and it shows that the program is doing the draw enemy function but it still wont draw? </p> <p>Here is the thing running: <a href="http://www.taffatech.com/DarkOrbit.html" rel="nofollow">http://www.taffatech.com/DarkOrbit.html</a> Entire code: <a href="http://www.taffatech.com/Source.js" rel="nofollow">http://www.taffatech.com/Source.js</a></p> <p>If anyone can help me with this I would be very grateful!</p> <p>Here are my data functions:</p> <pre><code>function Player() //Object { //////Your ships values this.PlayerHullMax = 1000; this.PlayerHull = 1000; this.PlayerShieldMax = 1000; this.PlayerShield = 347; this.SpaceCrystal = 2684; this.Speed = 10; //should be around 2 pixels every-time draw is called by interval, directly linked to the fps global variable //////////// ///////////flags this.isUpKey = false; this.isDownKey = false; this.isLeftKey = false; this.isRightKey = false; ///////////// //////////extra ///////////// ////Pick Ship this.type = "Cruiser"; this.srcX = PlayerSrcXPicker(this.type); this.srcY = PlayerSrcYPicker(this.type); this.drawX = PlayerdrawXPicker(this.type); this.drawY = PlayerdrawYPicker(this.type); this.playerWidth = PlayerWidthPicker(this.type); this.playerHeight = PlayerHeightPicker(this.type); //// } Player.prototype.draw = function() { ClearPlayerCanvas(); ctxPlayer.globalAlpha=1; this.checkDirection(); //must before draw pic to canvas because you have new coords now from the click ctxPlayer.drawImage(spriteImage,this.srcX,this.srcY,this.playerWidth,this.playerHeight,this.drawX,this.drawY,this.playerWidth,this.playerHeight); }; Player.prototype.checkDirection = function() //these functions are in the PLayer class { if(this.isUpKey == true)//if true { if(Player1.drawY &gt;= (0 + this.Speed)) { this.drawY -= this.Speed; } } if(this.isRightKey == true) { if(Player1.drawX &lt;= (canvasWidthPlayer - this.playerWidth)) { this.drawX += this.Speed; } } if(this.isDownKey == true) { if(Player1.drawY &lt;= (canvasHeightPlayer - this.playerHeight)) { this.drawY += this.Speed; } } if(this.isLeftKey == true) { if(Player1.drawX &gt;= (0 + this.Speed)) { this.drawX -= this.Speed; } } }; ///////////////////END PLAYER DATA//////////////////////////////////////////////// function Enemy() //Object { //////Your ships values this.EnemyHullMax = 1000; this.EnemyHull = 1000; this.EnemyShieldMax = 1000; this.EnemyShield = 347; this.SpaceCrystalReward = 2684; this.EnemySpeed = 10; //should be around 2 pixels every-time draw is called by interval, directly linked to the fps global variable //////////// ////Pick Ship this.type = "Hover"; this.srcX = EnemySrcXPicker(this.type); this.srcY = EnemySrcYPicker(this.type); this.drawX = EnemydrawXPicker(this.type); this.drawY = EnemydrawYPicker(this.type); this.enemyWidth = EnemyWidthPicker(this.type); this.enemyHeight = EnemyHeightPicker(this.type); //// } Enemy.prototype.draw = function() { ClearEnemyCanvas(); ctxEnemy.globalAlpha=1; ctxEnemy.drawImage(spriteImage,this.srcX,this.srcY,this.playerWidth,this.playerHeight,this. drawX,this.drawY,this.playerWidth,this.playerHeight); } //////////START ENEMY DATA////////////////// function PlayerSrcXPicker(type) //these functions can be used by player and enemy { if (type == "Cruiser") { return 0; } } function PlayerSrcYPicker(type) { if (type == "Cruiser") { return 1385; } } function PlayerdrawXPicker(type) { if (type == "Cruiser") { return 100; } } function PlayerdrawYPicker(type) { if (type== "Cruiser") { return 400; } } function PlayerWidthPicker(type) { if (type == "Cruiser") { return 148; } } function PlayerHeightPicker(type) { if (type == "Cruiser") { return 85; } } function EnemySrcXPicker(type) { if (type == "Hover") { return 906; } } function EnemySrcYPicker(type) { if (type == "Hover") { return 601; } } function EnemydrawXPicker(type) { if (type == "Hover") { return 800; } } function EnemydrawYPicker(type) { if (type== "Hover") { return 300; } } function EnemyWidthPicker(type) { if (type == "Hover") { return 90; } } function EnemyHeightPicker(type) { if (type == "Hover") { return 75; } } </code></pre> <p>My init() is:</p> <pre><code>function init() { drawBackground(); Player1 = new Player(); Enemy1 = new Enemy(); drawBars(); setUpListeners(); StartDrawingShips(); } </code></pre> <p>My interval:</p> <pre><code>function UpdateShips() { Player1.draw(); Enemy1.draw(); } function StartDrawingShips() { StopDrawing(); drawInterval = setInterval(UpdateShips,fps); // redraw player every fps } function StopDrawing() { clearInterval(drawInterval); } </code></pre> <p>If you need any other information then just ask!</p>