Fabric canvas load (v9)

Revision 9 of this benchmark created by Ann-Kathrin on

Description

This test compares the rendering speeds of images different sizes and resolutions.

Preparation HTML

<!-- native canvas -->
<canvas id="natCanvas" width="1920" height="1080">
</canvas>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<img src=".src= "http://www.letsgodigital.org/images/artikelen/35/d90-test-photo.jpg";" />

Setup

// =================== native canvas
    var natCanvas = document.getElementById('natCanvas');
    var natContext = natCanvas.getContext('2d');
    
    // =================== Fabric.js
    var fabCanvas = new fabric.Canvas('natCanvas');

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
natContext.clearRect(0, 0, 40, 40);
natContext.beginPath();
natContext.arc(20, 20, 20, 0, PI2, false);
natContext.fillStyle = 'green';
natContext.fill();
natContext.closePath();
ready

Revisions

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