KineticJS vs EaselJS Render (v4)

Revision 4 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>

<!-- ENCHANTJS -->
<script src="http://intern.aktivhyp.de/bounce/frameworks/enchant/enchant.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('green').drawCircle(20, 20, 20);
    stage.addChild(circle);
    stage.update();
    var easStage = stage;
    
    
    // =================== ENCHANTJS
    enchant(); // initialize
        var game = new Core(40, 40); // game stage
        game.fps = 999;
    
        game.onload = function(){
        // Creates Sprite that displays a circle.             
        var ball = new Sprite(40, 40);                        
        var surface = new Surface(40, 40);                    
        surface.context.beginPath();                          
        surface.context.arc(20, 20, 20, 0, Math.PI*2, true);  
        surface.context.fill();                               
        ball.image = surface;                                 
        game.rootScene.addChild(ball);
        }
        game.start();

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
Enchant
game._tick();
ready

Revisions

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