Collie >> KineticJS & EaselJS Render (v6)

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

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: 40,
                height: 40
            });
    
        new collie.Circle({
            x : 20,
            y : 20,
            radius : 20,
            fillColor : 'blue'
        }).addTo(layer);
     
        collie.Renderer.addLayer(layer);
        collie.Renderer.load(document.getElementById("container"));

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

Revisions

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