Frame-by-frame animation ใน HTML5 ด้วย canvas

เพื่อสร้าง frame-by-frame animation ใน HTML5 ด้วย canvas ลองรันโค้ด:

var myImageNum = 1;
var lastImage = 5;
var context = canvas.getContext('2d');
var img = new Image;
img.onload = function() {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
  context.drawImage(img, 0, 0);
};
var timer = setInterval(function() {
  if (myImageNum > lastImage) {
    clearInterval(timer);
  } else {
    img.src = "images/left_hnd_" + (myImageNum++) + ".png";
  }
}, 1000 / 15);