KineticJS vs EaselJS vs Collie vs Fabric vs Pixi vs CAAT CSS - Image Rotation (v23)

Revision 23 of this benchmark created on

Description

Rotates images using different canvas js tools. (Updated to 2013/2014/latest cdn versions of the libraries)

Preparation HTML

<script>
  var catpicdata = "data:image/jpeg;base64,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";
</script>

<!-- KineticJS -->
<div id="kinContainer" style="width: 200px; height: 200px;">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.6/kinetic.min.js">
</script>

<!-- EaselJS -->
<canvas id="easCanvas" width="200" height="200">
</canvas>
<script src="http://rawgithub.com/CreateJS/EaselJS/master/lib/easeljs-NEXT.min.js">
</script>

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


<!-- pixi.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js">
</script>
<div id="pixiContainer"></div>

<!-- fabric.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js">
</script>
<canvas id="fabricContainer" width="200" height="200"></canvas>
    
<!-- caat.css.js -->
<script src="http://labs.hyperandroid.com/static/caat/lib/caat-css.js"></script>
<div id="caatContainer" ></div>

<script>

  // **** KineticJS **** //
  var kinStage = new Kinetic.Stage({
    container: 'kinContainer',
    width: 200,
    height: 200
  });

  var kinLayer = new Kinetic.Layer();

  var kinImage = new Image();
  kinImage.src = catpicdata;
  var kinLogo;
  kinImage.onload = function() {

  kinLogo = new Kinetic.Image({
    x: 100,
    y: 62,
    image: kinImage,
    width: 200,
    height: 125,
    offset: [100, 62]
  });

  // add the shape to the layer
  kinLayer.add(kinLogo);

  // add the layer to the stage
  kinStage.add(kinLayer);
  }


  // **** FabricJS **** //
  var fabricCanvas = new fabric.StaticCanvas('fabricContainer');

  var fabricImage = new Image();
  fabricImage.src = catpicdata;
  var fabricObj;

  fabricImage.onload = function() {
    fabricObj = new fabric.Image(fabricImage, {
      originX: 'center', originY: 'center',
      left: 100, top: 62
    });
    fabricCanvas.add(fabricObj);
  };




  // **** EaselJS **** //
  var easStage = new createjs.Stage('easCanvas');
  var easLogo = new createjs.Bitmap(catpicdata);
  easLogo.set({
    x: 100,
    y: 62,
    regX: 100,
    regY: 62
  });
  easStage.addChild(easLogo);
  easStage.update();


  // **** Collie **** //
  var colLayer = new collie.Layer({
    width: 200,
    height: 200
  });

  collie.ImageManager.add({
    logo: catpicdata
  });

  var colLogo = new collie.MovableObject({
    x: 0,
    y: 0,
    backgroundImage: "logo",
    originX: 100,
    originY: 62
  }).addTo(colLayer);

  collie.Renderer.addLayer(colLayer);
  collie.Renderer.load(document.getElementById("colContainer"));


  // **** pixi.js **** //
  var pixiStage = new PIXI.Stage(0xFFFFFF);
  var pixiRenderer = PIXI.autoDetectRenderer(200, 200);
  document.getElementById('pixiContainer').appendChild(pixiRenderer.view);

  var pixiTexture = PIXI.Texture.fromImage(catpicdata);
  var pixiLogo = new PIXI.Sprite(pixiTexture);
  pixiLogo.anchor.x = 0.5;
  pixiLogo.anchor.y = 0.5;
  pixiLogo.position.x = 100;
  pixiLogo.position.y = 62;

  pixiStage.addChild(pixiLogo);



  // **** caat ****
  var caatDirector = new CAAT.Director().initialize(
        200,    // 200 pixels wide
        200,     // 200 pixels across
        document.getElementById("caatContainer"));

  var caatScene = caatDirector.createScene();  
  var caatActor = new CAAT.Actor();
    
  caatActor.x = 0;
  caatActor.y = 0;
  caatActor.width=200;
  caatActor.height=200;
  caatScene.addChild(caatActor);
    
  new CAAT.ImagePreloader().loadImages(
      [
          {id:'cat',    url:catpicdata}
      ],
      function( counter, images ) {
          caatDirector.setImagesCache(images);
          caatActor.setBackgroundImage(caatDirector.getImage("cat"));
          caatDirector.renderFrame();
      }
  );
    
  // **** Init **** //
  setTimeout(function() {
    kinLayer.drawScene();
    easStage.update();
    collie.Renderer.draw();
    pixiRenderer.render(pixiStage);
    CAAT.renderEnabled = true;
    caatDirector.renderFrame();
  }, 50);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS
for (var i = 0; i < 360; i += 15) {
  kinLogo.setRotationDeg(i);
  kinLayer.drawScene();
}
ready
EaselJS
for (var i = 0; i < 360; i += 15) {
  easLogo.rotation = i;
  easStage.update();
}
ready
Collie
for (var i = 0; i < 360; i += 15) {
  colLogo.set('angle', i);
  collie.Renderer.draw();
}
ready
Pixi.js (WebGL if supported)
for (var i = 0; i < 360; i += 15) {
  pixiLogo.rotation = i * Math.PI / 180;
  pixiRenderer.render(pixiStage);
}
ready
Fabric.js
for (var i = 0; i < 360; i += 15) {
  fabricObj.angle = -i * Math.PI / 180;
  fabricCanvas.renderAll();
}
ready
Caat CSS
for (var i = 0; i < 360; i += 15) {
  caatActor.setRotation(i * Math.PI / 180);
  caatDirector.renderFrame();
}
ready

Revisions

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