title: Drawing several images with canvas using off-screen rendering technique
body: <p>I'm trying to figure out a way to draw several images which are pulled from facebook and in a JSON data object which has become quite complex once I get them and do what I need to do before they're displayed.</p>
  
  <p>The images are profile pics, that need to be cropped using ctx.clip() to make them circles, and then a ring is drawn on top to make them have different color borders based on the type of friend or w/e. That's all set, works fine. Where I'm getting stuck is, were using this to create a visualization of the data and fb pics we pull, <a href="http://thejit.org" rel="nofollow">http://thejit.org</a>, and it is animating the visual when it loads right. So when these circular pics are drawn to the canvas, there are like 500 times that ctx.drawImage() is called and it's stupid. What needs to be done is get the data, create a temp canvas and ctx, draw each image to them, and then draw those canvases to the main canvas, THEN run the animation. </p>
  
  <p>make sense? </p>
  
  <p>any tips or ideas about how to go about doing that?</p>