Paper.js vs Processing.js vs Raphaël vs Processing.js w/Canvas API

JavaScript performance comparison

Revision 19 of this test case created by

Preparation code

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.9/paper.js"></script>
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script src="http://paperjs.org/static/js/raphael.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);
  paper.install(window);
  var paperRect;
  
  var processingCanvas = document.getElementById("processing");
var pctx = processingCanvas.getContext('2d');
  var processingInstance = new Processing(processingCanvas, null);
  processingInstance.background(255);
  
  var raphaelInstance = Raphael("rafael", 100, 100);
  var refaelRect;
</script>
    

Preparation code output

<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script> <script src="http://paperjs.org/static/js/raphael.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); paper.install(window); var paperRect; var processingCanvas = document.getElementById("processing"); var pctx = processingCanvas.getContext('2d'); var processingInstance = new Processing(processingCanvas, null); processingInstance.background(255); var raphaelInstance = Raphael("rafael", 100, 100); var refaelRect; </script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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
paperRect = new Shape.Rectangle(0, 0, 50, 50);
paperRect.fillColor = "#000";
view.draw();
paperRect.remove();
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…
Processing.js w/Canvas API
pctx.fillStyle = "#000";
pctx.fillRect(0, 0, 50, 50);
pctx.clearRect(0, 0, 100, 100);
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.

0 Comments