As a followup from a previous post, I have been trying to track down some slowdown I am having when drawing a scene using Javascript and the canvas element. I decided to narrow down my focus to a REALLY barebones animation that only clears the canvas and draws a single image, once per-frame. This of course runs silky smooth in Chrome, but it still stutters in Firefox. I added a simple FPS calculator, and indeed it appears that my page is typically getting an FPS in the 50's when running Firefox.
This doesn't seem right to me, I must be doing something wrong here. Can anybody see anything I might be doing that is causing this drop in FPS?
<!DOCTYPE HTML>
<html>
<head>
</head>
<body bgcolor=silver>
<canvas id="myCanvas" width="600" height="400"></canvas>
<img id="myHexagon" src="Images/Hexagon.png" style="display: none;">
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var animX = 0;
var frameCounter = 0;
var fps = 0;
var time = new Date();
function animate() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
animX += 1;
if (animX == canvas.width)
{
animX = 0;
}
var image = document.getElementById("myHexagon");
context.drawImage(image, animX, 128);
context.lineWidth=1;
context.fillStyle="#000000";
context.lineStyle="#ffffff";
context.font="18px sans-serif";
context.fillText("fps: " + fps, 20, 20);
++frameCounter;
var currentTime = new Date();
var elapsedTimeMS = currentTime - time;
if (elapsedTimeMS >= 1000)
{
fps = frameCounter;
frameCounter = 0;
time = currentTime;
}
// request new frame
requestAnimFrame(function() {
animate();
});
}
window.onload = function() {
animate();
};
</script>
</body>
</html>