paper vs fabric (v5)

Revision 5 of this benchmark created by rageboom 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);

//fabric   
var fabricCanvas = new fabric.Canvas('simple-fabric');
var c = new fabric.Circle({
  radius: 20,
  left: 100,
  top: 100,
  fill: 'yellow',
  stroke: 'black'
});

</script>

Test runner

Ready to run.

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

Revisions

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