paper vs fabric (v4)

Revision 4 of this benchmark created on

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>       
<div class='test'>
            <div class='canvas'>
                <canvas id='simple-paper' class='paper-size' resize></canvas>
            </div>
            <div class='canvas'>
                <canvas id='simple-fabric'></canvas>
            </div>
        </div>
<script>

function getRandomNum(num) {
    return Math.floor((Math.random() * num) + 1);
}
var paperCanvas = document.getElementById('simple-paper');
paper.setup(paperCanvas);
        
var fabricCanvas = this.__canvas = new fabric.Element('simple-fabric', {
          renderOnAddRemove: false,
          stateful: false,
          width: 350,
          height: 350
        });
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
simple-paper
var ball = new paper.Shape.Circle({
    center: [getRandomNum(300), getRandomNum(300)],
    radius: 20,
    strokeColor: 'black',
    fillColor: 'tomato'
});
 
ready
simple-fabric
var c = new fabric.Circle({
  radius: 20,
  left: getRandomNum(300),
  top: getRandomNum(300),
  fill: 'yellow',
  stroke: 'black'
});
fabricCanvas.renderAll(c);
ready

Revisions

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