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

Revision 20 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/assets/js/paper.js"></script>
<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script src="http://raphaeljs.com/raphael.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.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>
<figure id="svgjsCanvas"></figure>
<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');
  var processingInstance = new Processing(processingCanvas, null);
  processingInstance.background(255);
  
  var raphaelInstance;
  var rephaelRect;

   var svgJsDraw;
   var svgJsRect;

window.onload = function(){
   svgJsDraw = SVG('svgjsCanvas');
   //raphaelInstance = Raphael("rafael", 100, 100);
}
</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
rephaelRect = raphaelInstance.rect(0, 0, 50, 50);
rephaelRect.attr({
  fill: "#000",
  "stroke-width": 0
});
rephaelRect.remove();
ready
Processing.js w/Canvas API
pctx.fillStyle = "#000";
pctx.fillRect(0, 0, 50, 50);
pctx.clearRect(0, 0, 100, 100);
ready
SVG JS
svgJsRect = svgJsDraw.rect(0, 0, 50, 50);
svgJsRect.attr({
  fill: "#000",
  "stroke-width": 0
});
svgJsRect.remove();
ready

Revisions

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