ngfmb-canvas-complex (v3)

Revision 3 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='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>
function getRandomNum(num) {
  return Math.floor((Math.random() * num) + 1);
}

var canvasPaper = document.getElementById('complex-paper');
paper.setup(canvasPaper);

var canvasFabric = this.__canvas = new fabric.Element('complex-fabric', {
    renderOnAddRemove: false,
    stateful: false
});

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
paper-complex
    var path = new paper.Path.Star({
      center: [getRandomNum(300), getRandomNum(300)],
      points: 5,
      radius1: 15,
      radius2: 40,
      fillColor: 'tomato',
      strokeColor: 'black'
    });
ready
fabric-complex
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'
    });
canvasFabric.renderAll();
ready

Revisions

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