Test case details

Preparation Code

<!-- native canvas --> <canvas id="natCanvas" width="40" height="40"> </canvas> <!-- collieJS --> <canvas id="containercollie" width="40" height="40"> <script type="text/javascript" src="http://jindo.dev.naver.com/collie/deploy/collie.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.22/paper.js"></script>
// =================== native canvas     var natCanvas = document.getElementById('natCanvas');     var natContext = natCanvas.getContext('2d');     var PI2 = Math.PI * 2;         // =================== CollieJS     var collieCanvas = document.getElementById('containercollie');         new collie.Circle({             x : 0,             y : 0,             radius : 20,             fillColor : "green",         }).addTo(collieCanvas);                 // =================== 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();
    document.getElementById('natCanvas').innerHTML = '';

Test cases

Test #1

collie.Renderer.draw()

Test #2

fabCanvas.renderAll();

Test #3

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

Test #4

easStage.update();

Test #5

paper.view.draw();