title: Nested animations using canvas and javascript
body: <p>Are nested animations possible using canvas and javascript? For example, a butterfly flapping its wings whilst simultaneously moving along a path. </p>
  
  <p>What would be the best way of going about creating this kind of animation? There will be multiple instances of the same butterfly moving in different directions. </p>
  
  <p>At the minute I'm drawing the butterfly shape on the canvas, in two parts, the left and right wings, which I will animate separately. Then I'll go abou animating the whole butterfly on a path. </p>
  
  <p>It just seems like there will be a lot of processing used on the multiple drawings and animations, could this be saved by using a PNG rather than a shape, or even an animated GIF?</p>
  
  <p>Any advice would be appreciated! Thanks!</p>