Paper.js vs Processing.js vs Raphaël

JavaScript performance comparison

Revision 14 of this test case created

Preparation code

<script src="http://paperjs.org/static/js/paper-new.js"></script>
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script src="http://thesis.web-pilot.cz/scanvas.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>
<div id="scanvas"><canvas width="100" height="100"></canvas></div>

<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;
 
  var scanvasInstance = new sCanvas("scanvas");
  var scanvasRect;
</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.fill(0);
processingInstance.noStroke();
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…
sCanvas
scanvasRect = scanvasInstance.rect(0, 0, 50, 50);
scanvasRect.attr({
  fill: "#000",
  stroke: null
});
scanvasRect.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:

0 comments

Add a comment