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

Revision 12 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="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>
<script src="http://matthieuboheas.com/KanVas/latest-build/Kanvas.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>
<canvas id="Kanvas" width="100" height="100"></canvas>

<script>
  var contextCanvas = document.getElementById("context");
  var ctx = contextCanvas.getContext("2d");

  var paperCanvas = document.getElementById("paper");
  paper.setup(paperCanvas);
  paper.install(window);
  var paperRect = new Shape.Rectangle(0, 0, 50, 50);
  paperRect.fillColor = "#000";

  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 raphaelRect;
</script>

Setup

var layer = new kan.Layer({ canvas: 'Kanvas' });

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
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
KanVas
new kan.Rectangle({ width: 50, height: 50, fill: '#000' }).draw({ context: layer.context });
layer.clear();
ready

Revisions

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