jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
This test compares the rendering speeds of popular HTML5 Canvas libraries, such as KineticJS, Fabric.js, Paper.js, EaselJS, KanVas 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 others provide additional functionality, ultimately adding overhead.
<!-- native canvas -->
<canvas id="natCanvas" width="40" height="40">
</canvas>
<!-- KineticJS -->
<div id="kinContainer">
</div>
<script src="http://kineticjs.com/experimental/kinetic-v4.4.4-beta.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;
// =================== 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);
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('kinContainer').innerHTML = '';
Ready to run.
Test | Ops/sec | |
---|---|---|
KineticJS Render Circle |
| ready |
Fabric.js Render Circle |
| ready |
Native Canvas |
| ready |
EaselJS Render Circle |
| ready |
Paper.js Render Circle |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.