HTML5 Canvas Library Render Image Performance (v22)

Revision 22 of this benchmark created by Jare on

Description

This test compares the image force re-rendering speeds of popular HTML5 Canvas libraries, such as KineticJS, Fabric.js, Paper.js, EaselJS, Raphael.js, 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

<!-- image to render -->
<img width="104" height="75" id="sheep" style="display: none;" src="data:image/png;base64,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" />
<!-- native canvas -->
<canvas id="natCanvas" width="512" height="512"></canvas>
<!-- KineticJS -->
<div id="kinContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.0.1/kinetic.min.js"></script>
<!-- Fabric.js -->
<div id="fabContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<!-- EaselJS -->
<canvas id="easCanvas" width="512" height="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.7.1/easeljs.min.js"></script>
<!-- Paper.js -->
<canvas id="papCanvas" width="512" height="512"></canvas>
<script src="https://cdn.bootcss.com/paper.js/0.9.18/paper-core.min.js"></script>
<!-- Raphael.js -->
<div id="rapContainer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>

Setup

var imgEL = document.getElementById('sheep');
    
    // =================== native canvas
    var natCanvas = document.getElementById('natCanvas');
    var natContext = natCanvas.getContext('2d');
    
    // =================== KineticJS
    var kinStage = new Kinetic.Stage({
      container: 'kinContainer',
      width: 512,
      height: 512
    });
    var kinLayer = new Kinetic.Layer();
    kinStage.add(kinLayer);
    
    // =================== Fabric.js
    var fabCanvasEL = document.createElement('canvas');
    fabCanvasEL.id = 'fabCanvas';
    fabCanvasEL.width = 512;
    fabCanvasEL.height = 512;
    document.getElementById('fabContainer').appendChild(fabCanvasEL);
    var fCanvas = new fabric.Canvas('fabCanvas');
    
    // =================== EaselJS
    var easStage = new createjs.Stage('easCanvas');
    
    // =================== Paper.js
    var papCanvas = document.getElementById('papCanvas');
    paper.setup(papCanvas);
    
    // =================== Raphael.js
    var rapPaper = Raphael('rapContainer', 512, 512);

Teardown


    // =================== native canvas
    natContext.save();
    natContext.setTransform(1, 0, 0, 1, 0, 0);
    natContext.clearRect(0, 0, 512, 512);
    natContext.restore();
    // =================== KineticJS
    kinStage.destroy();
    //document.getElementById('kinContainer').innerHTML = '';
    // =================== EaselJS
    easStage.removeAllChildren();
    easStage.enableMouseOver(0);
    easStage.enableDOMEvents(false);
    easStage.canvas = null;
    // =================== Fabric.js
    var canvasContainer = fCanvas.getElement().parentNode;
    fCanvas.clear();
    fCanvas.dispose();
    if (canvasContainer.parentNode) {
      canvasContainer.parentNode.removeChild(canvasContainer);
    }
    // =================== Paper.js
    paper.project.remove();
    // =================== Raphael.js
    //document.getElementById('rapContainer').innerHTML = '';
    rapPaper.clear();
    rapPaper.remove();

Test runner

Ready to run.

Testing in
TestOps/sec
KineticJS
kinLayer.clear();
var kinImgEL = new Kinetic.Image({
  x: 256,
  y: 256,
  image: imgEL,
  width: imgEL.width,
  height: imgEL.height
});
kinLayer.add(kinImgEL);
kinLayer.draw();
ready
Fabric.js
fCanvas.clear();
var fabImg = new fabric.Image(imgEL, {
  left: 256,
  top: 256
});
fCanvas.add(fabImg);
fCanvas.renderAll();
ready
Native Canvas
natContext.save();
natContext.setTransform(1, 0, 0, 1, 0, 0);
natContext.clearRect(0, 0, 512, 512);
natContext.restore();
natContext.drawImage(imgEL, 256, 256, imgEL.width, imgEL.height);
ready
EaselJS
easStage.removeAllChildren();
var easelBitmap = new createjs.Bitmap(imgEL.src);
easelBitmap.x = 256;
easelBitmap.y = 256;
easStage.addChild(easelBitmap);
easStage.update();
ready
Paper.js
paper.project.clear();
var raster = new paper.Raster('sheep');
raster.position = new paper.Point(256, 256);
paper.view.draw();
ready
Raphael.js
rapPaper.clear();
var rapEL = rapPaper.image(imgEL.src, 256, 256, imgEL.width, imgEL.height);
ready

Revisions

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