KineticJS vs EaselJS vs Collie vs Pixi - Image Rotation (v20)

Revision 20 of this benchmark created by Edwin on

Description

Rotates images using different canvas js tools.

Preparation HTML

<script>
  var catpicdata = "http://www.goodboydigital.com/wp-content/uploads/2013/01/goodboy_logo.png";
</script>

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

<!-- EaselJS -->
<canvas id="easCanvas" width="200" height="200">
</canvas>
<script src="http://code.createjs.com/createjs-2013.09.25.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="http://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js">
</script>
<div id="pixiContainer"></div>

<canvas id="pixiContainerCanvas" width=200 height=200></canvas>

<!-- cgengine -->
<script src="http://176.10.116.50/cgengine.min.js"></script>
<canvas id="cgengineContainer" width=200 height=200></canvas>

<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);
  }




  // **** 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);

  // **** pixi.js canvas **** //
  var pixiStageCanvas = new PIXI.Stage(0xFFFFFF);
  var pixiRendererCanvas = new PIXI.CanvasRenderer(200, 200, document.getElementById('pixiContainerCanvas'));
   
  
  var pixiTextureCanvas = PIXI.Texture.fromImage(catpicdata);
  var pixiLogoCanvas = new PIXI.Sprite(pixiTextureCanvas);
  pixiLogoCanvas.anchor.x = 0.5;
  pixiLogoCanvas.anchor.y = 0.5;
  pixiLogoCanvas.position.x = 100;
  pixiLogoCanvas.position.y = 62;

  pixiStageCanvas.addChild(pixiLogoCanvas);



  var cgEngineStage = new    CGEngine.Graphic.Stage(document.getElementById("cgengineContainer"));
  var image = new Image();
  var cgEngineSprite = null;
  image.src = catpicdata;
  image.onload = function() {
    cgEngineSprite = new CGEngine.Graphic.Sprite(image);
    cgEngineSprite.regX = 100;
    cgEngineSprite.regY = 62;
    cgEngineSprite.addToStage(cgEngineStage);
    cgEngineSprite.setIsChanged();
    cgEngineStage.draw();
  }

  // **** Init **** //
  setTimeout(function() {
    kinLayer.drawScene();
    easStage.update();
    collie.Renderer.draw();
    pixiRenderer.render(pixiStage);

    pixiRendererCanvas.render(pixiStageCanvas);
  }, 1000);
</script>

Setup

var i = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS
i = (i+1) % 360; 

kinLogo.setRotationDeg(i);
kinLayer.drawScene();
 
ready
EaselJS
i = (i+1) % 360; 

easLogo.rotation = i;
easStage.update();
ready
Collie
i = (i+1) % 360; 

colLogo.set('angle', i);
collie.Renderer.draw();
 
ready
Pixi.js (WebGL if supported)
i = (i+1) % 360; 

pixiLogo.rotation = i * Math.PI / 180;
pixiRenderer.render(pixiStage);
 
ready
Pixi.js Canvas render
i = (i+1) % 360; 

pixiLogoCanvas.rotation = i * Math.PI / 180;
pixiRendererCanvas.render(pixiStageCanvas);
 
ready
CGEngine canvas render
i = (i+1) % 360; 

cgEngineSprite.rotation = i;
cgEngineSprite.setIsChanged();
cgEngineStage.draw();
ready

Revisions

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