paper vs fabric (v2)

Revision 2 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 id='log-simple-paper'></div>
            </div>
            <div class='canvas'>
                <canvas id='simple-fabric'></canvas>
                <div id='log-simple-fabric'></div>
            </div>
        </div>
<script>
    
paper.install(window);

function getRandomNum(num) {
    return Math.floor((Math.random() * num) + 1);
}

function simplePaper() {
    var logEl = document.getElementById('log-simple-paper');
    var canvas = document.getElementById('simple-paper');

    paper.setup(canvas);
        var ball = new Shape.Circle({
            center: [getRandomNum(300), getRandomNum(300)],
            radius: 20,
            strokeColor: 'black',
            fillColor: 'tomato'
        });
}
        
function simpleFabric() {
    var logEl = document.getElementById('log-simple-fabric');
    var canvas = this.__canvas = new fabric.Element('simple-fabric', {
          renderOnAddRemove: false,
          stateful: false,
          width: 350,
          height: 350
        }),
        Circle = fabric.Circle;

      var c = new Circle({
        radius: 20,
        left: getRandomNum(300),
        top: getRandomNum(300),
        fill: 'yellow',
        stroke: 'black'
      });
      c.hasControls = c.hasBorders = false;
      canvas.add(c);
    canvas.renderAll();
    canvas.calcOffset();
}
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
simple-paper
simplePaper()
ready
simple-fabric
simpleFabric()
ready

Revisions

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