Paper.js vs Processing.js vs Raphaël

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<script src="http://thesis.web-pilot.cz/paper.min.js"></script>
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>

<canvas id="context" width="100" height="100"></canvas>
<canvas id="paper" width="100" height="100"></canvas>
<canvas id="processing" width="100" height="100"></canvas>
<span id="rafael"></span>

<script>
  var contextCanvas = document.getElementById("context");
  var ctx = contextCanvas.getContext("2d");

  var paperCanvas = document.getElementById("paper");
  paper.setup(paperCanvas);
  var paperPoint1 = new paper.Point(0, 0);
  var paperPoint2 = new paper.Point(50, 50);
  var paperPath;
 
  var processingCanvas = document.getElementById("processing");
  var processingInstance = new Processing(processingCanvas, null);
  processingInstance.background(255);
 
  var raphaelInstance = Raphael("rafael", 100, 100);
  var refaelRect;
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Context - rect
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 50, 50);
ctx.clearRect(0, 0, 100, 100);
pending…
Context - path
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(50, 0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(0, 0);
ctx.closePath();
ctx.fill();
ctx.clearRect(0, 0, 100, 100);
pending…
Paper.js
paperPath = new paper.Path.Rectangle(paperPoint1, paperPoint2);
paperPath.fillColor = "#000";
paper.view.draw();
paperPath.remove();
paper.view.draw();
pending…
Processing.js
processingInstance.rect(0, 0, 50, 50);
processingInstance.background(255);
pending…
Raphaël
raphaelRect = raphaelInstance.rect(0, 0, 50, 50);
raphaelRect.attr({
  fill: "#000",
  "stroke-width": 0
});
raphaelRect.remove();
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Jürg Lehni commented :

Interesting. And while we are aware that Paper.js cannot compare to the performance of raw canvas drawing commands, or any state machine based framework that does not use an internal scene graph, I'd like to point out that the comparison is not quite fair, for a couple of reasons: - Drawing the view twice leads to a clearing of the view twice too. So to be fair, you'd have to clear the rectangle before doing any drawing in the beginning as well. - I am not sure that the actual redrawing of SVG content after changes is measured in the Raphaël example.

Add a comment