Pixi.js WebGLRenderer

Tests:

Canvas

Canvas + Shape Caching

SVG, requestAnimationFrame

SVG, D3.timer

Pixi.js, CanvasRenderer

Pixi.js, WebGLRenderer

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
canvas {
    border: 1px dashed gray;
}
#results, #container {
    display: inline-block;
    margin: 15px;
}
p {
    margin: 15px;
}
td {
  border: 1px solid #bbb;
}
.header {
  font-weight: bold;
}
</style>
<body>
<p id="user-agent"></p>
<div id="container"></div>
<table id="results">
    <tr class="header">
      <td>Circles</td>
      <td>FPS</td>
      <td>repaint [ms]</td>
    </tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script src="https://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js"></script>
<script>
/* global requestAnimationFrame, $, PIXI, canvg */
window.requestAnimationFrame = (function() {
  return window.requestAnimationFrame ||
         window.webkitRequestAnimationFrame ||
         window.mozRequestAnimationFrame ||
         window.oRequestAnimationFrame ||
         window.msRequestAnimationFrame ||
         function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
           return window.setTimeout(callback, 1000/60);
         };
})();

var tests = [250, 500, 750, 5000, 10000];

function updateResults(count, time, steps) {
  var repaint = time / steps,
      $tr = $("<tr>");
  $tr.append("<td>" + count + "</td><td>" + (1000/repaint).toFixed(2) + "</td><td>" + repaint.toFixed(2) + "</td>");
  $("#results").append($tr);
}

function test() {
  var count,
      maxX = 500,
      maxY = 400,
      maxSteps = 150,
      steps = 0,
      renderer,
      stage,
      container,
      circleCanvas,
      circleTexture,
      circles = [],
      cdata = [],
      startTime,
      circle,
      i;

if (tests.length > 0) {
    $("#container").empty();
    count = tests.shift();
  } else {
    return;
  }

renderer = new PIXI.WebGLRenderer(maxX, maxY);
  $("#container").append(renderer.view);

stage = new PIXI.Stage(0xFFFFFF);
  container = new PIXI.DisplayObjectContainer();
  stage.addChild(container);
  circleCanvas = document.createElement("canvas");
  canvg(circleCanvas, "circle.svg");
  // workaround: without removing cached textures creating a new texture
  // will use cached texture from old WebGL context.
  PIXI.BaseTextureCache = {};
  PIXI.TextureCache = {};
  circleTexture = new PIXI.Texture.fromCanvas(circleCanvas);

for (i = 0; i < count; i++) {
      circle = {
          x: maxX * Math.random(),
          y: maxY * Math.random(),
          vx: Math.random(),
          vy: Math.random()
      };
      cdata.push(circle);
      circle = new PIXI.Sprite(circleTexture);
      circle.anchor.x = 0.5;
      circle.anchor.y = 0.5;
      circles.push(circle);
      container.addChild(circle);
  }

// Start animation.
  startTime = new Date().getTime();
  requestAnimationFrame(step);

function step() {
    var i, len, c, time;
    for (i = 0, len = count; i < len; i++) {
      c = cdata[i];
      if (c.x >= maxX || c.x <= 0) c.vx *= -1;
      if (c.y >= maxY || c.y <= 0) c.vy *= -1;
      c.x += c.vx;
      c.y += c.vy;

circles[i].position.x = c.x;
      circles[i].position.y = c.y;
    }
    renderer.render(stage);
    if (steps < maxSteps) {
      steps++;
      requestAnimationFrame(step);
    } else {
      time = new Date().getTime() - startTime;
      updateResults(count, time, maxSteps);
      test();
    }
  }
}

$(function () {
  $("#user-agent").text(navigator.userAgent);
  test();
});
</script>
</body>
</html>

Modified http://canvg.googlecode.com/svn/trunk/canvg.js to a secure url

Modified http://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

https://canvg.googlecode.com/svn/trunk/canvg.js

https://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js