KineticJS vs EaselJS Render (v11)

Revision 11 of this benchmark created on

Preparation HTML

<!-- KineticJS -->
<div id="kinContainer">
</div>
<script src="http://kineticjs.com/experimental/kinetic-v4.5.2-beta.js">
</script>

<!-- EaselJS -->
<canvas id="easCanvas" width="40" height="40">
</canvas>
<script src="http://code.createjs.com/createjs-2013.02.12.min.js">
</script>

<!-- Collie -->
<script src="http://jindo.dev.naver.com/collie/deploy/collie.min.js"></script>
<div id="container"></div>

<!-- pixi.js -->
<script src="http://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js">
</script>

Setup

// =================== KineticJS
    var kinStage = new Kinetic.Stage({
      container: 'kinContainer',
      width: 40,
      height: 40
    });
    
    var kinLayer = new Kinetic.Layer();
    var kinCircle = new Kinetic.Circle({
      x: 20,
      y: 20,
      radius: 20,
      fill: 'green',
      listening: false
    });
    
    // add the shape to the layer
    kinLayer.add(kinCircle);
    
    // add the layer to the stage
    kinStage.add(kinLayer);
    
    
    // =================== EaselJS
    var stage = new createjs.Stage('easCanvas');
    circle = new createjs.Shape();
    circle.graphics.beginFill('red').drawCircle(20, 20, 20);
    stage.addChild(circle);
    stage.update();
    var easStage = stage;
    
    
    
    
    <!-- Collie -->
            var layer = new collie.Layer({
                width: 320,
                height: 480
            });
    
        new collie.Circle({
            x : 20,
            y : 20,
            radius : 20,
            fillColor : 'blue'
        }).addTo(layer);
     
        collie.Renderer.addLayer(layer);
        collie.Renderer.load(document.getElementById("container"));
    
    <!-- pixi.js -->
    var stage2 = new PIXI.Stage(0x66FF99);
    var renderer = new PIXI.CanvasRenderer(40, 40);
    document.body.appendChild(renderer.view);
    
    var c = new PIXI.Graphics();
    c.beginFill();
    c.drawCircle(20, 20, 20);
    c.endFill();
    
    stage2.addChild(c);

Teardown


    document.getElementById('kinContainer').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS Render Circle
kinLayer.drawScene();
ready
EaselJS Render Circle
easStage.update();
ready
Collie
collie.Renderer.draw()
ready
Pixi.js
renderer.render(stage2);
ready

Revisions

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