HTML5 Canvas Library Render Performance (v16)

Revision 16 of this benchmark created by Dhumez 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>
<!-- collieJS -->
<div id="container" class="container"></div>
<script type="text/javascript" src="http://jindo.dev.naver.com/collie/deploy/collie.min.js"></script>
<script>
var layer = new collie.Layer({
        width : 40,
        height : 40
    }); 
collie.Renderer.addLayer(layer);

</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.22/paper.js"></script>

Setup

// =================== native canvas
    var natCanvas = document.getElementById('natCanvas');
    var natContext = natCanvas.getContext('2d');
    var something_move = true;
    
    var circX = 10;
    var circY = 10;
    
    var newcircX = 15;
    var newcircY = 15;
    
    var PI2 = Math.PI * 2;
    
    // =================== CollieJS
        new collie.Circle({
            x : 0,
            y : 0,
            radius : 20,
            fillColor : "green",
        }).addTo(layer);
    
    
    // =================== 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);
    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('natCanvas').innerHTML = '';
    collie.Renderer.load(document.getElementById("container"));

Test runner

Ready to run.

Testing in
TestOps/sec
CollieJS Render Circle
collie.Renderer.draw()
ready
Fabric.js Render Circle
fabCanvas.renderAll();
ready
Native Canvas
if (something_move)
{
natContext.clearRect(0, 0, 40, 40);
natContext.beginPath();
natContext.arc(20, 20, 20, 0, PI2, false);
natContext.fillStyle = 'green';
natContext.fill();
natContext.closePath();
something_move = false;
}
else
{
// Do something else...
// Check inputs
// Verif moving...
if (newcircX != circX || newcircY != circY)
{ 
circX = newcircX;
circY = newcircY;
something_move = true;
}
}

 
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.