paper vs fabric

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>
        <div class='test'>
            <div class='canvas'>
                <canvas id='image-paper' class='paper-size' resize></canvas>
                <div id='log-image-paper'></div>
            </div>
            <div class='canvas'>
                <canvas id='image-fabric'></canvas>
                <div id='log-image-fabric'></div>
            </div>
        </div>
        <div class='test'>
            <div class='canvas'>
                <canvas id='complex-paper' class='paper-size' resize></canvas>
                <div id='log-complex-paper'></div>
            </div>
            <div class='canvas'>
                <canvas id='complex-fabric'></canvas>
                <div id='log-complex-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);

    for (var i = 100; i--; ) {
        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;

    for (var i = 100; i--; ) {
      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();
}

function imagePaper() {
    var logEl = document.getElementById('log-image-paper'),
        canvas = document.getElementById('image-paper');

    paper.setup(canvas);

    for (var i = 1000; i--; ) {
        var raster = new Raster({
            source: '../dog.jpg',
            position: new Point(getRandomNum(300), getRandomNum(300))
        });

        raster.scale(0.1, 0.1);
    }
}

function imageFabric() {
    var logEl = document.getElementById('log-image-fabric'),
        canvas = this.__canvas = new fabric.Element('image-fabric', {
          renderOnAddRemove: false,
          stateful: false,
          width: 350,
          height: 350
        });

    for (var i = 100; i--; ) {
      fabric.Image.fromURL('../dog.jpg', function(oImg) {
          oImg.set('left', getRandomNum(300));
          oImg.set('top', getRandomNum(300));
          oImg.scale(0.1);
          canvas.add(oImg);    
      });
    }
    canvas.renderAll();
    canvas.calcOffset();

}

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

    paper.setup(canvas);

    for (var i = 100; i--; ) {
        var path = new Path.Star({
            center: [getRandomNum(300), getRandomNum(300)],
            points: 5,
            radius1: 15,
            radius2: 40,
            fillColor: 'tomato',
            strokeColor: 'black'
        });
    }
}

function complexFabric() {
    var logEl = document.getElementById('log-complex-fabric'),
        canvas = this.__canvas = new fabric.Element('complex-fabric', {
        renderOnAddRemove: false,
        stateful: false,
        width: 350,
        height: 350
        });

    for (var i = 1000; i--; ) {
        var path = new fabric.Path('m221.89001,168.15955l22.53615,0l6.96384,-19.86229l6.96385,19.86229l22.53615,0l-18.2321,12.27543l6.9642,19.86229l-18.2321,-12.27576l-18.2321,12.27576l6.96421,-19.86229l-18.2321,-12.27543z', {
            left: getRandomNum(300),
            top: getRandomNum(300),
            strokeWidth: 1,
            fill: 'yellow',
            stroke: 'black'
        });
        canvas.add(path);
    }
    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.