paper vs fabric (v6)

Revision 6 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>
    paper.install(window);

    var paperCanvas = document.getElementById('simple-paper');
    paper.setup(paperCanvas);

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

         canvasFabric.add(c);

    function getRandomNum(num) {
        return Math.floor((Math.random() * num) + 1);
    }
</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
canvasFabric.renderAll();
ready

Revisions

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