animate_sprite.js

var image = new Image();
image.src = "../images/smurf_sprite.png";

$(image).load(function () {
	animate();
});

function animate() {
    update();
    draw();
    setTimeout(animate, 50);
}

var currentFrameX = 0;
var currentFrameY = 0;
function update() {
    currentFrameX ++;
    if (currentFrameX >= 4) {
        currentFrameX = 0;
        currentFrameY++;
        if (currentFrameY >= 4)
            currentFrameY = 0
    }
}

var frameSize = 128;
function draw() {
    context.fillStyle = "CornFlowerBlue"
    context.fillRect(0, 0, canvasWidth, canvasHeight);
    context.drawImage(image,
        currentFrameX * frameSize,
        currentFrameY * frameSize,
        frameSize, 
        frameSize,
        (canvasWidth - frameSize) /2,
        (canvasHeight - frameSize) / 2,
        frameSize,
        frameSize);
}