Why Canvas implementation is faster than Pixi.JS one?

Question

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:

var object = { x:, y:, length:, children: [ /* this repeats three times */ ] };

Not using path caching my implementation of drawing any object looks like this:

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();

It gets ~25FPS with 500 objects (1500 total draws with children). I tried PIXI.js to see if WebGL would be faster. I used PIXI.DisplayObjectContainer for objects and PIXI.Graphics for each children (calling the moveTo...lineTo block once on each of them at init time). It couldn't get above 20FPS.

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.

Answer 1

Hmm probably you've already fixed the issue considering the date this question was posted.

It's likely you user Canvas Renderer instead of WebGL one.

You can force it to have WebGL Renderer like below

var renderer = new PIXI.WebGLRenderer(WIDTH, HEIGHT);

instead of

var renderer = new PIXI.autoDetectRenderer(WIDTH, HEIGHT);
// can be either Canvas or WebGL