Return to Question

added 912 characters in body

Source Link

edited Sep 19, 2012 at 15:41

--EDIT--

I did some additional experimentation, and now I'm not sure that this issue really has anything to do with canvas at all.

I added a "frame duration" counter in miliseconds, and neither Chrome nor Firefox ever go above 1 ms, so the code I am running inside animate is certainly not exceeding the 60 FPS frame time. My current theory is that the Firefox browser just isn't giving me a consistent animation frame that is locked to V-sync; I had read some old posts about Firefox being capped in the 50's, and maybe this is still true?

So I tried a new method to compensate for the problem. I started "pooling" my update time, and running an updatge step for each 16.6666 milisecond increment in the pool. Frankly, this looks almost MORE jittery, but I am guessing that it at least maintains a more consistent timeline for a game. Blech though :( Is this really the best way to go?

Source Link

asked Sep 19, 2012 at 5:21

jujumbura

Slow Firefox Javascript Canvas Performance?

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>