KineticJS vs EaselJS Render (v15)

Revision 15 of this benchmark created by XingxuWu on

Preparation HTML

<!-- KineticJS -->
<div id="kinetic">
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.min.js">
</script>

<!-- EaselJS -->
<canvas id="demoCanvas" width="500" height="300">
 </canvas>

Setup

Benchmark.prototype.setup = function() {
        var stage = new Kinetic.Stage({
          container: 'kinetic',
          width: 300,
          height: 150
        });
        var layer = new Kinetic.Layer({
          hitGraphEnabled: false
        });
        
        layer.add(new Kinetic.Rect({
          width: 100,
          height: 100,
          fill: '#f55',
          transformsEnabled: 'position'
        }));
        
        stage.add(layer);
        
        var easelStage = new createjs.Stage("demoCanvas");
    var circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 50);
    circle.x = 100;
    circle.y = 100;
    stage.addChild(circle);
      };

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS Render Circle
easelStage .drawScene();
ready
EaselJS Render Circle
stage.update();
ready

Revisions

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