HTML5 Canvas and Javascript issue drawing multiple animated sprites on same canvas

Question

Sorry if the title is a little confusing, I didn't know what the best way to word it would be.

I'm working on a tile based java-script canvas game that uses sprite sheets and tile maps to create the world and objects in it.
I wrote a section of code to animate a coin to spin around. For a single coin this works fine, but adding more than one coin to the canvas will cause the animation to speed up beyond what's desirable.
Since the game will be adding coins as it progresses, after about 10 coins you probably won't be able to see the animation anymore.

Gif to show the issue:

I've tried multiple methods, even adding a frame delay to slow down the animation, but without the desired results.

Everything is on codepen http://codepen.io/TryHardHusky/pen/EjJdoK
But it's a little messy.

Code I'm using to animate the coin:

var coin = {
  height: 32,
  width: 32,
  cFrame: 0,
  mFrame: 8,
  image: new Image(),
  src: "http://s1.tryhardhusky.com/coin_gold.png",
  draw: function(x, y){
    coin.cFrame++;
    coin.image.src = coin.src;
    if(coin.cFrame >= coin.mFrame){
      coin.cFrame = 0;
    }
    ctx.drawImage(coin.image, 32*coin.cFrame,0,32,32,x,y, coin.height,coin.width);
  }
}

And to create a coin on the scene:

coin.draw(250,250);
coin.draw(218, 250);  
coin.draw(186, 250);  

This is a remake of my other pen: http://codepen.io/TryHardHusky/pen/rVbdmw

I had it working there, but was using another inefficient method to animate the coins. It's also very poorly optimized, Hence the reason for the new code.

Can anyone shine some light on what I'm doing wrong?

-- Edit --

Thanks to @canvas was able to fix it with:

  var coins = [
      [4,5,0],
      [2,3,0],
      [1,6,0]
  ];  

.

  for(var i = 0; i < coins.length; i++){
    drawCoin(coins[i], i);
  }

.

function drawCoin(cord,i){
  coins[i][2] < 8 ? coins[i][2]+=1 : coins[i][2]=0;
  var image = new Image();
  image.src = "http://s1.tryhardhusky.com/coin_gold.png";
  ctx.drawImage(image, 32*cord[2], 0, 32, 32, cord[0]*32, cord[1]*32, 32, 32);
}

Answer 1

Have you tried using this instead of coin?

draw: function(x, y){
    this.cFrame++;
    this.image.src = this.src;
    if(this.cFrame >= this.mFrame){
      this.cFrame = 0;
    }
    ctx.drawImage(this.image, 32*this.cFrame,0,32,32,x,y, this.height,this.width);

Also what you should probably do is have an array of coins, then simply add a new coin to that array then use a loop to draw out each coin and update each coin.

Create an array of coins (example code)

var coins[];

coins.push(new coin(xPosition, yPosition));

// Render coins
for(var i = 0; i < coins.length; i++)
{
    coins[i].Draw();
}

I just forked your codepen,

This isn't perfect, but something like this (created an array, updated coin var to be a constructor and then added 3 coins to the new array)

CodePen : http://codepen.io/anon/pen/GJLwJw