​

var width = 300,

    height = 56,

    frames = 10,

    actualFrame = 0,

    posX = 100,

    posY = 100;

​

var canvas = document.createElement('img'),

  canvasStyle = canvas.style;

  canvas.src = 'http://images.virtualdesign.pl/images/78335sprite.jpg';

  canvasStyle.position = "absolute";

  canvasStyle.top = posX;

  canvasStyle.left = posY;

  //canvasStyle.width = width;

  //canvasStyle.height = height;

  document.body.appendChild(canvas);

var draw = function(){

  var frameTop = height * actualFrame, 

    frameLeft = 0, 

    frameRight = width, 

    frameBottom = frameTop + height;

  canvasStyle.clip = "rect("

    +frameTop +"px " //top

    +frameRight +"px " //right

    +frameBottom +"px " //bottom

    +frameLeft +"px )"; //left

  //canvasStyle.left = posX - width * actualAnimation;

  canvasStyle.top = posY - height * actualFrame;

    if (actualFrame == frames) {

      actualFrame = 0;

    }

    else {

      actualFrame++;

    }

} 

​

setInterval(draw, 80);

​