HTML5 Canvas Library Render Performance (v37)

Revision 37 of this benchmark created by rageboom on

Description

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

Note: These tests don't compare apples to apples. Some libraries are much simpler in nature, and mostly provide an easier API for canvas drawing, while other libraries are much more complex and provide additional functionality, ultimately adding overhead.

Preparation HTML

<!-- native canvas -->
<canvas id="natCanvas" width="40" height="40">
</canvas>
<!-- KineticJS -->
<div id="kinContainer">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js">
</script>
<!-- Fabric.js -->
<canvas id="fabCanvas" width="40" height="40">
</canvas>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.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>
<!-- Paper.js -->
<canvas id="papCanvas" width="40" height="40">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.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
    });
    
    // add the shape to the layer
    kinLayer.add(kinCircle);
    
    // add the layer to the stage
    kinStage.add(kinLayer);
    
    // =================== Fabric.js
    var fabCanvas = new fabric.Canvas('fabCanvas');
    
    // create Circle - note radius
    var fabCircle = new fabric.Circle({
      top: 20,
      left: 20,
      radius: 20,
      fill: 'green'
    });
    
    fabCanvas.add(fabCircle);
    
    // =================== EaselJS
    var stage = new createjs.Stage('easCanvas');
    circle = new createjs.Shape();
    circle.graphics.beginFill('green').drawCircle(20, 20, 20);
    for(var i = 0; i < 22; i++)
    {
    stage.addChild(circle);
    }
    stage.update();
    var easStage = stage;
    
    // =================== Paper.js
    var papCanvas = document.getElementById('papCanvas');
    paper.setup(papCanvas);
    var papCircle = new paper.Path.Circle(new paper.Point(100, 70), 50);
    papCircle.fillColor = 'green';
    paper.view.draw();

Teardown


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

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS Render Circle
kinLayer.drawScene();
ready
Fabric.js Render Circle
fabCanvas.renderAll();
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
for(var i = 0; i < 22; i++)
{
natContext.clearRect(0, 0, 40, 40);
natContext.beginPath();
natContext.arc(20, 20, 20, 0, PI2, false);
natContext.fillStyle = 'green';
natContext.fill();
natContext.closePath();
}
 
ready
EaselJS Render Circle
easStage.update();
ready
Paper.js Render Circle
paper.view.draw();
ready

Revisions

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