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

JavaScript performance comparison

Revision 9 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://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="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></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
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. Here’s a list of current revisions for this page:

0 comments

Add a comment