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, 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.
<!-- native canvas -->
<canvas id="natCanvas" width="40" height="40">
</canvas>
<!-- QuintusJS -->
<script src='http://cdn.html5quintus.com/v0.1.1/quintus-all.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;
// =================== QuintusJS
var Q = Quintus()
.include("Sprites")
.setup()
Q.MovingSprite.extend("Ball",{
draw: function(ctx) {
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(-this.p.cx,
-this.p.cy,
this.p.w/2,0,Math.PI*2);
ctx.fill();
}
});
var ball = window.ball = new Q.Ball({ w: 20, h: 20,
x: 30, y: 300,
});
// =================== 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 = '';
Ready to run.
Test | Ops/sec | |
---|---|---|
PixiJS 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.