HTML5 Canvas Library Render Performance (v21)

Revision 21 of this benchmark created by Gleb Glyaga on

Description

This test compares the rendering speeds of popular HTML5 Canvas libraries, such as KineticJS and EaselJS and a baseline native canvas rendering.

Preparation HTML

<!-- native canvas -->
<canvas id="natCanvas" width="40" height="40"></canvas>
<script type="text/javascript" src="http://test.glyaga.ru/ilr/tween.js"></script>

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

<!-- EaselJS -->
<canvas id="easCanvas" width="40" height="40"></canvas>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://test.glyaga.ru/ilr/tweenjs-NEXT.min.js"></script>

Setup

// =================== native canvas
    var natCanvas = document.getElementById('natCanvas');
    var natContext = natCanvas.getContext('2d');
    var PI2 = Math.PI * 2;
    // =================== 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
    });
    var kinText = new Kinetic.Text({
      x: 10,
      y: 15,
      text: 'Simple Text',
      fontSize: 10,
      fontFamily: 'Calibri',
      fill: 'green'
    });
    
    kinLayer.add(kinText);
    kinLayer.add(kinCircle);
    kinStage.add(kinLayer);
    
    // move a node to the right at 50 pixels / second
    var velocity = 50;
    var anim = new Kinetic.Animation(function(frame) {
      var dist = velocity * (frame.timeDiff / 1000);
      kinCircle.move(dist, 0);
    }, kinLayer);
    
    // =================== EaselJS
    var stage = new createjs.Stage('easCanvas');
    
    var easContainer = new createjs.Container();
    
    var easCircle = new createjs.Shape();
    easCircle.graphics.beginFill('green').drawCircle(20, 20, 20);
    
    var easText = new createjs.Text("Simple text", "10px Calibri", "#00ff00");
    easText.x = 10;
    easText.y = 15;
    easText.textAlign = "center";
    
    easContainer.addChild(easCircle, easText);
    stage.addChild(easContainer);
    
    stage.update();
    var easStage = stage;

Teardown


    document.getElementById('kinContainer').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS Render Circle
kinLayer.drawScene();

anim.start();
ready
Native Canvas
// native canvas rendering will always be the fastest because it just
// pushes pixels to a bitmap.  Canvas libraries will be a bit slower 
// because they provide more functionality
natContext.clearRect(0, 0, 40, 40);
natContext.beginPath();
natContext.arc(20, 20, 20, 0, PI2, false);
natContext.fillStyle = 'green';
natContext.fill();
natContext.closePath();

natContext.fillText("Simple text", 10, 15, 120);
ready
EaselJS Render Circle
easStage.update();

createjs.Tween.get(easContainer).to({
  x: easContainer.x + 50
}, 1000);
ready

Revisions

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