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

JavaScript performance comparison

Revision 4 of this test case created

Info

Specifically I was curious where the bottleneck for Processing.js was in the original test.

Using the native canvas api from within Processing.js is MUCH faster.

Perhaps the fastest.

See how to use it in your sketches here:

http://processingjs.org/articles/RenderingModes.html

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 paperPath;
 
  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

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(0, 0, 50, 50);
paperPath.fillColor = "#000";
paper.view.draw();
paperPath.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. Here’s a list of current revisions for this page:

1 comment

Kazuki Otsuka commented :

I tried the same logic with both processing.js and paper.js. According to the experience, I think that paper.js is faster than processing.js in the case of more complicated structure.

Add a comment