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

Revision 3 of this benchmark created by Matt Lockyer 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="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 paperPoint1 = new paper.Point(0, 0);
  var paperPoint2 = new paper.Point(50, 50);
  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>

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
paperPath = new paper.Path.Rectangle(paperPoint1, paperPoint2);
paperPath.fillColor = "#000";
paper.view.draw();
paperPath.remove();
paper.view.draw();
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.