title: Why Canvas implementation is faster than Pixi.JS one?
body: <p>I'm writing a 2D game engine. To check performance I was drawing 1000 objects with 3 children each. Only the children are drawn, and the structure looks like this:</p>
  
  <p><code>var object = {
    x:,
    y:,
    length:,
    children: [
      /* this repeats three times */
    ]
  };
  </code></p>
  
  <p>Not using path caching my implementation of drawing any object looks like this:</p>
  
  <pre><code>save();
  
  translate(object.x, object.y);
  rotate(object.rotation);
  
  beginPath();
  moveTo(0, 0);
  lineTo(object.length / 8, -object.length / 8);
  lineTo(object.length, 0);
  lineTo(object.length / 8, object.length / 8);
  stroke();
  
  for (child in children) {
    // repeat the same for each child
  }
  
  restore();
  </code></pre>
  
  <p>It gets ~25FPS with 500 objects (1500 total draws with children). I tried PIXI.js to see if WebGL would be faster. I used <code>PIXI.DisplayObjectContainer</code> for objects and <code>PIXI.Graphics</code> for each children (calling the <code>moveTo...lineTo</code> block once on each of them at init time). It couldn't get above 20FPS.</p>
  
  <p>Did I did something wrong or is there some magic Canvas performance boost over WebGL when drawing paths? It was on Chrome 33.0.1750.149 on Ubuntu 12.04 x64.</p>