title: Frame by frame animation in HTML5 with canvas
body: <p>I have a flash animation I am trying to convert to HTML5. Now I have taken out all the images. For example in the hand animation, I have taken images of all hand images. I have made the canvas with the base drawing but I don't know how to replace those images frame by frame.</p>
  
  <pre><code>function draw(){
      var canvas = document.getElementById('canvas');
      if(canvas.getContext){
          // canvas animation code here:
          var ctx = canvas.getContext('2d');
  
          var lhs = new Image();
  
          lhs.src = "images/left_hnd_1.png";
  
          lhs.onload = function(){
              ctx.drawImage(lhs, 293, 137);
          }
  
      } else {
          // canvas unsupported code here:
          document.getElementById('girl').style.display = "block";
      }
  }
  </code></pre>
  
  <p>Now I have three more frame for this image. left_hnd_2.png, left_hnd_3.png &amp; left_hnd_4.png. I would've used one image but the difference in frames is way too much for it to be done with one image. How can I animate this with the time differences I want.</p>
  
  <p>Any ideas would be greatly appreciated. Thanks!</p>