Dealing with multiple animation state in one sprite sheet image using html5 canvas

Question

I am recently creating a Game using html5 canvas .The player have multiple state it can walk jump kick and push and multiple other states my question is simple but after some deep research i couldn't find the best way to deal with those multiple states this is my jsfiddle : http://jsfiddle.net/Z7a5h/5/

i managed to do one animation but i started my code in a messy way ,can anyone show me a way to deal with multiple state animation for one sprite image or just give a useful link to follow and understand the concept of it please .I appreciate your help

 if (!this.IsWaiting) {
    this.IsWaiting = true;
    this.lastRenderTime = now;
    this.Pos = 1 + (this.Pos + 1) % 3;
 }
  else {
    if (now - this.lastRenderTime >= this.RenderRate) this.IsWaiting = false;
 }

Answer 1

This is my animation class, which let's you set an animation and create the animation as object. I personally like to place the animations in an array such as playerAnimations[], and run the animations according to what the player does.

var toPix = function(n) {
      return n*TILE; //tile is basically the same as sh or sw, but I used Tilesizes to draw things.
};

// Animations
var Sprite = function(image, sx, sy, sw, sh) {
    this.img = image;
    this.sx = sx;
    this.sy = sy;
    this.sw = sw;
    this.sh = sh;

    Sprite.prototype.draw = function(ctx, x, y) {
        this.x = x;
        this.y = y;
        this.ctx = ctx;
        this.ctx.drawImage(this.img, this.sx, this.sy, this.sw, this.sh, this.x, this.y, this.sw, this.sh);
    };
};

var Animation = function(url, ctx, startingRow, rows, columns, sw, sh) {
    this.ctx = ctx;
    this.url = url;
    this.startRow = toPix(startingRow - 1);
    this.rows = rows;
    this.columns = columns;
    this.sprites = [];
    animImg = new Image();
    animImg.addEventListener('load', function() {});
    animImg.src = this.url;
    for(var i = 0; i < columns; i++) {
        sprite = new Sprite(animImg, i*sw, this.startRow, sw, sh);
        this.sprites.push(sprite);
    }   
    this.spriteToDraw = 0;
    this.drawSprite = 0;
    this.drawSpriteTime = 10;

    Animation.prototype.start = function() {
        this.stopAnimation = false;
    };

    Animation.prototype.stop = function() {
        this.stopAnimation = true;
    };

    Animation.prototype.draw = function(x, y) {
        if(!this.stopAnimation) {
            if(this.spriteToDraw < this.sprites.length) {
                var sprite = this.sprites[this.spriteToDraw];
            } else {
                this.spriteToDraw = 0;
                var sprite = this.sprites[this.spriteToDraw];
            }

            sprite.draw(this.ctx, x, y);

            if(this.drawSprite > this.drawSpriteTime) {
                this.spriteToDraw++;
                this.drawSprite = 0;
            } else {
                this.drawSprite += 1;
            }
        }
    };
};

//var animation = new Animation('theSprite.png', 5, 5, 45, 45);
//playerAnimations.push(animation);

And then this would be a sample player.draw() function.action. What it does is: it checks which state the player is in, stops all other animations and runs the correct animation for that state.

player.prototype.draw = function() {
    //player.draw function
    if(this.playerRight) {
        if (this.playerAnimation = playerAnimations[0]) {
            this.playerAnimation.stop();
        }
        if (this.playerAnimation = playerAnimations[2]) {
            this.playerAnimation.stop();
        }
        this.playerAnimation = playerAnimations[1];
        this.playerAnimation.start();
        this.playerAnimation.draw(this.x, this.y);
    } else if(!this.playerRight && !this.playerLeft) {
        if (this.playerAnimation = playerAnimations[1]) {
            this.playerAnimation.stop();
        }
        if (this.playerAnimation = playerAnimations[2]) {
            this.playerAnimation.stop();
        }
        this.playerAnimation = playerAnimations[0];
        this.playerAnimation.start();
        this.playerAnimation.draw(this.x, this.y);
    } else {
        if(this.playerLeft) {
        if (this.playerAnimation = playerAnimations[0]) {
            this.playerAnimation.stop();
        }
        if (this.playerAnimation = playerAnimations[1]) {
            this.playerAnimation.stop();
        }
        this.playerAnimation = playerAnimations[2];
        this.playerAnimation.start();
        this.playerAnimation.draw(this.x, this.y);
    }
};

I hope this is able to help you. This is my way of doing these kind of animations and it works for me, good luck!