KineticJS vs EaselJS Render (v12)

Revision 12 of this benchmark created by Eric on

Preparation HTML

<!-- KineticJS -->
<div id="kinContainer">
</div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js">
</script>

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

Setup

// =================== KineticJS
    var kinStage = new Kinetic.Stage({
      container: 'kinContainer',
      width: 40,
      height: 40
    });
    
    var kinLayer = new Kinetic.Layer({
      hitGraphEnabled: false
    });
    var kinCircle = new Kinetic.Circle({
      x: 20,
      y: 20,
      radius: 20,
      fill: 'green',
      transformsEnabled: 'position'
    });
    
    // 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;

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

Revisions

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