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

Revision 24 of this benchmark created on

Description

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 HTML

<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="http://paperjs.org/assets/js/paper.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>
<div id="rafael" width="100" height="100"></div>

<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');

// use webgl
  var processingInstance = new Processing(processingCanvas, null);
  processingInstance.background(255);
processingInstance.size(300, 300, "3D");
  
  var raphaelInstance = Raphael("rafael", 100, 100);
  var refaelRect;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Context - rect
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 50, 50);
ctx.clearRect(0, 0, 100, 100);
ready
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);
ready
Paper.js
paperRect = new Shape.Rectangle(0, 0, 50, 50);
paperRect.fillColor = "#000";
view.draw();
paperRect.remove();
ready
Processing.js
processingInstance.fill(0);
processingInstance.noStroke();
processingInstance.rect(0, 0, 50, 50);
processingInstance.background(255);
ready
Raphaël
raphaelRect = raphaelInstance.rect(0, 0, 50, 50);
raphaelRect.attr({
  fill: "#000",
  "stroke-width": 0
});
raphaelRect.remove();
ready
Processing.js w/Canvas API
pctx.fillStyle = "#000";
pctx.fillRect(0, 0, 50, 50);
pctx.clearRect(0, 0, 100, 100);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.