HTML5 Cropped Canvas Image Not Showing - image

Question

I am learning HTML5 and JavaScript and am attempting to draw an animated image. I thought the easiest way to do this would be to create an image with the frames in a row, as below.
Image http://html5stuff.x10.mx/HTML5%20Test/alien_green_strip8.png
Then a only part of the image would be draw at a time. I followed this tutorial.
This is a link to what I have made:
html5stuff.x10.mx/HTML5%20Test/page.html
The problem is, the image isn't being drawn. It's something within the drawSprite function, because when I change it to a simple "ctx.drawImage(sprite.source, x, y)", it does draw the image (just as a whole without the animation, obviously). Please note that though there is an option for rotating the image, I have not yet added support for that. Also, keys.js is not being used yet though it is included.

Answer 1

The reason is because sprite.imagenum is not defined when drawSprite is called.
This is because in some places you use imagenum and others imgnum, so correct that typo and you're good to go!
TOTALLY OPTIONAL:
But now that thats answered lets take a look at your js to get a better idea of how to structure this. You have:
function Sprite(){
var imagenum = null; //The number of images
var width = null; //The width of each image
var height = null; //The height on each image
var xoffset = null; //The origin on each image
var yoffset = null;
var source = null; //The location of each image
}
function drawSprite(sprite, subimg, x, y, w, h, angle){
ctx.drawImage(sprite.source, Math.floor(subimg) * sprite.width, 0, w * sprite.imagenum, h, x - sprite.xoffset * (w/sprite.width), y - sprite.yoffset * (h/sprite.height), w, h);
}
All those var statements are actually doing nothing. It should be:
function Sprite(){
this.imagenum = null; //The number of images
this.width = null; //The width of each image
this.height = null; //The height on each image
this.xoffset = null; //The origin on each image
this.yoffset = null;
this.source = null; //The location of each image
}
in order to correctly set them as you were envisioning. Also, you can rewrite drawSprite so that the sprites are drawing themselves, so that you don't need to pass them as an argument:
// now we can use "this" instead of "sprite"
Spite.prototype.draw = function(subimg, x, y, w, h, angle){
// put this on several lines just so we can see it easier
ctx.drawImage(this.source,
Math.floor(subimg) * this.width,
0,
w * this.imagenum, h,
x - this.xoffset * (w/this.width),
y - this.yoffset * (h/this.height),
w, h);
}
Then instead of:
drawSprite(img, index, 128, 128, 32, 32, 0); // img is a sprite
We can write:
img.draw(index, 128, 128, 32, 32, 0); // img is a sprite