Vanilla Canvas vs PaperJs vs RaphaëlJs (v32)

Revision 32 of this benchmark created by Max on

Preparation HTML

<script src="http://paperjs.org/assets/js/paper.js"></script>
<script src="http://raphaeljs.com/raphael.js"></script>

<canvas id="context" width="100" height="100"></canvas>
<canvas id="paper" width="100" height="100"></canvas>
<div id="raphael"></div>

Setup

var contextCanvas = document.getElementById("context");
      var ctx = contextCanvas.getContext("2d");
    
      var paperCanvas = document.getElementById("paper");
      paper.setup(paperCanvas);
      paper.install(window);
    
      var paperRect = new Shape.Rectangle(0, 0, 50, 50);
      
    //  var raphaelInstance = Raphael('raphael', 100, 100);
      var rephaelRect;
    
      var i = 0;
    
    //window.onload = function() {
    //    raphaelInstance = Raphael('raphael', 100, 100);
    //};

Test runner

Ready to run.

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

Revisions

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