title: Drawing multiple sprite images on the HTML5
body: <p>Currently I have put some functions together into a class. So it will be easier for me to store inside an array for multiple drawing of the sprite images. However is there a method that I can draw them out manually, instead of I set it through the array outprint and it draw it out automatically? Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
    &lt;title&gt;Fish Animation&lt;/title&gt;
    &lt;style type='text/css'&gt;
      canvas  {border:1px solid; background-color:#EFEFEF;}
    &lt;/style&gt;
  
  &lt;script type='text/javascript'&gt;
  window.onload=function(){
  var canvas = document.getElementById('pondCanvas');
  var context = canvas.getContext('2d');
  polyFillRAFNow() ;
  
  var frameCount = 8 ; 
  var frameWidth, frameHeight ; 
  var frameScale = 0.4 ; 
  
  var animIndex = 0 ;
  var animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];
  
  var xPos = canvas.width / 2, 
  yPos = canvas.height / 2;
  var speedX;
  var speedY;
  var speedXSign;
  var speedYSign;
  var fishes = [];
  var anotherFish;
  
  function Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight) {
      this.image = imgFish;
      this.xPos = canvas.width / 2;
      this.yPos = canvas.height / 2;
      this.speedX = speedX;
      this.speedY = speedY;
      this.frameWidth = frameWidth;
      this.frameHeight = frameHeight;
      this.frameCount = 8;
      this.frameScale = 0.4;
      this.animIndex = 0;
      this.animFrames = [0, 1, 2, 3, 3, 4, 4, 5, 6, 6, 7, 6, 5, 4, 4, 3, 2, 2, 1, 1, 1];
  }
  
  Fish.prototype.changeDirection = function () {
      speedXSign = this.speedX &gt; 0 ? 1 : -1;
      speedYSign = this.speedY &gt; 0 ? 1 : -1;
      this.speedX = speedXSign * (1 + Math.random() * 1.7);
      this.speedY = speedYSign * (1 + Math.random() * 2);
  };
  
  Fish.prototype.move = function () {
  this.animIndex++;
      if ( this.animIndex == animFrames.length) this.animIndex = 0;
  
      this.xPos += this.speedX;
      if ((this.xPos + this.frameWidth * this.frameScale / 1.8) &gt;= canvas.width || 
          (this.xPos - this.frameWidth * this.frameScale / 1.8) &lt;= 0) {
          this.speedX = -this.speedX;
      }
  
      this.yPos += this.speedY;
      if ((this.yPos + this.frameHeight * frameScale / 1.8) &gt;= canvas.height || 
          (this.yPos - this.frameHeight * frameScale / 1.8) &lt;= 0) {
          this.speedY = -this.speedY;
      }
  };
  
  Fish.prototype.drawFish = function () {
      context.save();
      context.translate(this.xPos, this.yPos);
      var speedXSign = this.speedX &gt; 0 ? 1 : -1;
      var speedYSign = this.speedY &gt; 0 ? 1 : -1;
      context.scale(speedXSign, speedYSign);
      var frameIndex = animFrames[this.animIndex];
      context.drawImage(imgFish, frameIndex * this.frameWidth, 0, frameWidth, frameHeight,
                      -frameWidth * frameScale / 2, -this.frameHeight * this.frameScale / 2, 
                          this.frameWidth * this.frameScale, this.frameHeight * this.frameScale);
      context.restore();
  };
  
  function animate() {
      requestAnimationFrame(animate);
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i &lt; fishes.length; i++){
          var fish = fishes[i];
          fish.changeDirection();
          fish.move();
          fish.drawFish();
      }
  }
  
  var imgFish = new Image();
  imgFish.onload = init;
  imgFish.src = 'http://dl.dropbox.com/s/4x14mv75dx7bmi5/FishStrip.png';
  
  function init() {
      frameWidth = imgFish.width / frameCount ; 
      frameHeight = imgFish.height ; 
  
      for (var i = 0; i &lt; 3; i++) {
          var anotherFish = new Fish(xPos, yPos, speedX, speedY, imgFish, frameWidth, frameHeight);
          fishes.push(anotherFish);
          anotherFish.drawFish();
      }
      animate();
  }
  
  function polyFillRAFNow() {
      var w = window,
          foundRequestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame || w.oRequestAnimationFrame || function (cb)     {
              setTimeout(cb, 1000 / 60);
          };
      window.requestAnimationFrame = foundRequestAnimationFrame;
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;canvas id="pondCanvas" width="1024" height="600"&gt;
          Canvas is not supported.
      &lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>