JS Sprite Sheet Animation Class

//SpriteSheet for handling walk animations.
//Based off: http://gamedevelopment.tutsplus.com/tutorials/an-introduction-to-spritesheet-animation--gamedev-13099

function SpriteSheet(path, frameWidth, frameHeight) {
    this.image = new Image();
    this.frameWidth  = frameWidth;
    this.frameHeight = frameHeight;
    var self = this;

    // calculate the number of frames in a row after the image loads
    this.image.onload = function() {
        self.framesPerRow = Math.floor(self.image.width / self.frameWidth);
    };

    this.image.src = path;
}


function Animation(spritesheet, startFrame, endFrame, frameSpeed) {
    var animationSequence = [];  // array holding the order of the animation
    this.currentFrame = 0;       // the current frame to draw
    var counter = 0;             // keep track of frame rate
    var self = this;

    // create the sequence of frame numbers for the animation.
    for (var frameNumber = startFrame; frameNumber <= endFrame; frameNumber++) {
        animationSequence.push(frameNumber);
    }

    this.updateAnimation = function() {
        // update to the next frame if it is time
        if (counter == (frameSpeed - 1)) {
            self.currentFrame = (self.currentFrame + 1) % animationSequence.length;
        }
        counter = (counter + 1) % frameSpeed;
    };

    this.draw = function(ctx, x, y) {
        x = x || 0;
        y = y || 0;

        // get the row and col of the frame
        var col = Math.floor(animationSequence[self.currentFrame] % spritesheet.framesPerRow);
        var row = Math.floor(animationSequence[self.currentFrame] / spritesheet.framesPerRow);

        ctx.drawImage(
            spritesheet.image,
            col * spritesheet.frameWidth,
            row * spritesheet.frameHeight,
            spritesheet.frameWidth, spritesheet.frameHeight,
            x, y,
            spritesheet.frameWidth, spritesheet.frameHeight);
    };
}

/*
These classes work by creating a SpriteSheet object and one
Animation object for every animation you want your entity to have.

var player = {
    x: 0, y: 0,
    sprite: new SpriteSheet("foo.png", 12, 20),
    attack: null //attack references player.sprite and so can't be initialized here.
};

player.attack = new Animation(player.sprite, 0, 5, 4);

To use this animation, call updateAnimation() in your
drawing loop. This will loop the animation over and over.
If you don't want to loop, but simply to draw one frame,
set currentFrame to whatever, and call the Animation object's
draw() method without calling updateAnimation():

draw() {
    player.attack.draw(ctx, player.x, player.y);
    if(player.animating) {
        player.attack.updateAnimation();
    }
}

All handling of different animations, such as separate strips
of the same spritesheet, is done in the main code as opposed
to the object. This gives the object less usability, but gives
the developer more freedom to use it how s/he wants.

All this class does is animate over a set of frames.
That is its only intended purpose.
Anything else must be made yourself for the time being.
*/