Hi guys,

Its the first time I've used HTML5 and I need multiple canvas items. I can't draw them all on one canvas because it is the price bubble on a eCommerce CMS, therefore I have to iterate through an array drawing a canvas for each new product.

At the moment the code runs but only draws one canvas and I can't work out why. I am using JQuery each() to go through each product and wish to draw a new circle on each one.

Check out my code below:

Code:
 var i = 0;
 var c = new Array();;
  var ctx = new Array();
if (isCanvasSupported())
{
  
$('.wrap_link').each(function() {
   $('<canvas id="html5_price" width="200" height="100"></canvas>').appendTo($(this));
   i++;
   console.log(i);
  c[i]= document.getElementById("html5_price");
  ctx[i]=c[i].getContext("2d");
ctx[i].fillStyle="#FF0000";
ctx[i].beginPath();
ctx[i].arc(70,18,15,0,Math.PI*2,true);
ctx[i].closePath();
ctx[i].fill();
});
}