Vanilla Canvas vs Vanilla SVG vs PaperJs vs RaphaëlJs (v33)

Revision 33 of this benchmark created on

Preparation HTML

<script src="http://paperjs.org/assets/js/paper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

<canvas id="context" width="100" height="100"></canvas>
<canvas id="paper" width="100" height="100"></canvas>
<div id="raphael"></div>
<svg width="100" height="100">
  <rect id="svgRect" x="0" y="0" width="50" height="50" stroke="#000"/>
</svg>

<script>
  var contextCanvas;
  var ctx;

  var svgRect; 

  var paperCanvas;
  var paperRect;
  
  var raphaelInstance;
  var rephaelRect;

  var i = 0;

  window.onload = function() {
    contextCanvas = document.getElementById("context");
    ctx = contextCanvas.getContext("2d");

    svgRect = document.getElementById("svgRect"); 

    paperCanvas = document.getElementById("paper");
    paper.setup(paperCanvas);
    paperRect = new paper.Shape.Rectangle(0, 0, 50, 50);
    paper.view.draw();

    raphaelInstance = Raphael('raphael', 100, 100);
    rephaelRect = raphaelInstance.rect(0, 0, 50, 50);
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Vanilla Canvas
ctx.clearRect(0, 0, 100, 100);
ctx.fillStyle = "#00" + (i++ % 10);
ctx.fillRect(0, 0, 50, 50);
ready
PaperJs
paperRect.fillColor = "#00" + (i++ % 10);
paper.view.draw();
 
ready
RaphaëlJs
rephaelRect.attr({
  fill: "#00" + (i++ % 10),
  "stroke-width": 0
});
ready
Vanilla SVG
svgRect.style.fill = "#00" + (i++ % 10);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.