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
What is the fastest way to draw on a canvas? Image from public URL? Image from data URL? Canvas used as image?
I'm testing this to know what method to use for storing and blitting tiles in a 2D tile engine.
<canvas width=400 height=300></canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var url = 'http://www.freegreatdesign.com/files/images/6/2865-weather-png-icon-7-3.jpg';
var pattern, patterncvs;
var img = new Image();
img.onload = function() {
var t = document.createElement('canvas');
t.width = 4;
t.height = 3;
var c = t.getContext('2d');
c.drawImage(img, 0, 0);
tdimg.src = t.toDataURL();
cvsimg.getContext('2d').drawImage(img, 0, 0);
pattern = ctx.createPattern(img);
patterncvs = ctx.createPattern(cvsimg);
}
img.src = url;
var tdimg = new Image();
var cvsimg = document.createElement('canvas');
</script>
Ready to run.
Test | Ops/sec | |
---|---|---|
Web URL Image |
| ready |
data URL Image |
| ready |
Canvas Image |
| ready |
Pattern of web URL image |
| ready |
Pattern of canvas |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.