title: function to draw (canvas) multiple items from an array
body: <p>I have a <code>seat</code> function which takes a number of values, 3 of which are used to draw circles on the canvas.</p>
  
  <p>each circle is a var named after a person and containing the values from the <code>seat</code> function.</p>
  
  <p>I have the following function which I use to draw the individual circles:</p>
  
  <pre>
                  ctx.fillPerson = function(p){
                      this.fillStyle = p.fillStyle;
                      this.arc(p.centerX, p.centerY, p.radius, 0, 2*Math.PI, false);
                      this.fill();
                  }
  </pre>
  
  <p>this works great when I do for example, <code>ctx.fillPerson(johnSmith);</code> however I am creating multiple groupings of people in array form and I need a function to draw the people in these arrays.</p>
  
  <p>I have an array containing the variables mentioned above like this: <code>var seatingOne = [johnSmith, joanSmith, bobJohnson, jillJohnson];</code></p>
  
  <p>However, I can't seem to get the function right, I feel like I am on the right track, but my limited javascript knowledge is holding me back. So far I have this:</p>
  
  <pre><code>            ctx.fillSeats = function(s){
                  for ( var i=0; i&lt;s.length; ++i ){
                      ctx.beginPath();
                      ctx.fillPerson(indexOf(s));
                  }
              }
  </code></pre>
  
  <p>My thinking is that I step through the array and perform a <code>beginPath();</code> and <code>ctx.fillPerson();</code> for each array item. I THINK(?) <code>indexOf</code> if the right tool to use but I am unsure if it is and exactly how to get the desired result.</p>
  
  <p>Any help is much appreciated and please correct me if I said anything improperly (not hip to the all the lingo quite yet either ;) )</p>
  
  <p>Thanks</p>