Paper.js vs Processing.js vs Raphaël

Benchmark created by bielda on

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

Revisions

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