Hi, I'm new to this forum. Below is a game code below. I was wondering how do I do frame animations in Javascript using the sprite sheet format that I have in the link below if I only want my character to have the appearance of only walking to the left when the left arrow key is pressed and walk to the right when the right arrow key is pressed? Thanks.

http://authorhenryemphrey.tripod.com/gallery/


Code:
<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Henry Emphrey's Game</title>
</head>
<body style="background:#4CFF00;">

  	
   
    <canvas id="canvasBg" width="800px" height="500px" style="display:block;background:#ffffff;margin:100px auto 0px;"></canvas>
    <canvas id="canvasMan" width="800px" height="500px" style="display:block;margin:-500px auto 0px;"></canvas>

    <script type="text/javascript">
var gameWidth = canvasBg.width;
var gameHeight = canvasBg.height;

var fps = 10;
var drawInterval; 


var canvasMan = document.getElementById('canvasMan');
var ctxMan = canvasMan.getContext('2d');
var Man1;  Man1 = new Man();


var imgSprite = new Image();
imgSprite.src = 'SpecSprites.png';
imgSprite.addEventListener('load',init,false);


function init() {

    document.addEventListener('keydown',checkKeyDown,false);
    document.addEventListener('keyup',checkKeyUp,false);

    startDrawing();

}



function startDrawing() {
    stopDrawing();
    drawInterval = setInterval(draw,fps);
}

function stopDrawing() {
    clearInterval(drawInterval);
}

function draw() {   
    Man1.draw();
}


function Man() {
    this.SpriteSourceX = 0;
    this.SpriteSourceY = 600;
    this.width = 60;
    this.height = 120;
    this.DrawManOnScreenX = 220;
    this.DrawManOnScreenY = 200;
    this.speed = 5;
    this.isUpKey = false;
    this.isRightKey = false;
    this.isDownKey = false;
    this.isLeftKey = false;
}


Man.prototype.draw = function () {
    clearCtxMan();
    this.checkKeys();
    ctxMan.drawImage(imgSprite,this.SpriteSourceX,this.SpriteSourceY,this.width,this.height,this.DrawManOnScreenX,this.DrawManOnScreenY,this.width,this.height);
};



Man.prototype.checkKeys = function () {
    if (this.isUpKey) {
        this.DrawManOnScreenY -= this.speed;
    }
    if (this.isRightKey) {
        this.DrawManOnScreenX += this.speed;
    }
    if (this.isDownKey) {
        this.DrawManOnScreenY += this.speed;
    }
    if (this.isLeftKey) {
        this.DrawManOnScreenX -= this.speed;
    }
};



function checkKeyDown(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        Man1.isUpKey = true;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        Man1.isRightKey = true;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        Man1.isDownKey = true;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        Man1.isLeftKey = true;
        e.preventDefault();
    }
}


function checkKeyUp(e) {
    var keyID = e.keyCode || e.which;
    if (keyID === 38 || keyID === 87) { //up arrow or W key
        Man1.isUpKey = false;
        e.preventDefault();
    }
    if (keyID === 39 || keyID === 68) { //right arrow or D key
        Man1.isRightKey = false;
        e.preventDefault();
    }
    if (keyID === 40 || keyID === 83) { //down arrow or S key
        Man1.isDownKey = false;
        e.preventDefault();
    }
    if (keyID === 37 || keyID === 65) { //left arrow or A key
        Man1.isLeftKey = false;
        e.preventDefault();
    }
}


function clearCtxMan() {
     ctxMan.clearRect(0,0,gameWidth,gameHeight);
}