I have a quite simple loop that draws an 8px by 8px image many times in a canvas in a tiling fashion. Currently it's drawing 7500 images each loop.
var img = new Image();
img.src = 'http://i.imgur.com/3dzaMlv.png';
var W = 8;
var H = 8;
var R = 800/W;
var C = 600/H
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fps = document.getElementById('fps');
var timePrev = new Date().getTime();
var fpsInterval = 30;
var i = 0;
window.setInterval(function() {
ctx.clearRect(0, 0, 800, 600);
for (var r=0 ; r<R ; r++) {
for (var c=0 ; c<C ; c++) {
ctx.drawImage(img, r*W, c*H);
}
}
// fps
if (i % fpsInterval == 0) {
var timeNow = new Date().getTime();
var spf = (timeNow - timePrev) / fpsInterval / 1000;
fps.innerHTML = (1/spf).toFixed(2);
timePrev = timeNow;
}
i++;
}, 1000/60);
On my I7-2700K (3.5GHz) processor and ATI Radeon HD7970, I am getting the following framerates:
- Chrome 36.0.1985.143 m : ~40 FPS
- Firefox 30.0 : ~55 FPS
- IE 11.0.9600.17239 : ~35 FPS
Is there any way to improve FPS performance here, assuming I do actually need to draw this many tiles on each update?
To clarify, I'm requiring that they be drawn as individual tiles on each update. So, rendering them all to an off-screen canvas wouldn't work. I am essentially disappointed in the number of drawImage() calls that seems to perform well.