Paper.js vs Processing.js vs Raphaël (v28)

Revision 28 of this benchmark created by Anton on

Preparation HTML

<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>

<canvas id="context" width="100" height="100"></canvas>
<canvas id="processing" width="100" height="100"></canvas>

<script>
  var contextCanvas = document.getElementById("context");
  var ctx = contextCanvas.getContext("2d");
  
  var processingCanvas = document.getElementById("processing");
  var processingInstance = new Processing(processingCanvas, null);
  processingInstance.background(255);
</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
Processing.js
processingInstance.rect(0, 0, 50, 50);
processingInstance.background(255);
ready

Revisions

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