CODEWITHSUNDEEP
javascriptjqueryfirefoxcanvassvg
Matrym
Matrym

Reputation: 17073

Choppy animations in canvas

My canvas animation is smooth as ice in chrome, but choppy as a bad haircut in firefox. The strangest thing is, it's not even a complex calculation. Does anyone see anything wrong (performance related) with my code that could cause this slowdown?

Here it is on jsfiddle: http://jsfiddle.net/Wu5Jh/

And here it is for SO:

$(document).ready(function(){
    //vars
    var x = 20,
            y = 20,
            pi = Math.PI,
            width,
            height,
            complete = 100,
            refreshInterval,
            ctx;

    // computed vars
    function init() {
      ctx = $('#canvas')[0].getContext("2d");
      width = $("#canvas").width();
      height = $("#canvas").height();  
        center = [width/2, height/2];
      refreshInterval = (function doSetTimeout(){
            draw();
            setTimeout(doSetTimeout, 30);
            })();
        };

    function circle(x,y,r) {

        // Draw the growing circle
        ctx.fillStyle = "#09f";
      ctx.beginPath();
    ctx.moveTo(x, y); // center of the pie
      ctx.arc(
            x, 
            y, 
            r, 
            -2*pi*complete/100 + pi*1.5,
            -pi*.5,
            true
        );
        ctx.lineTo(x, y);
      ctx.closePath();
      ctx.fill();

        // Draw the cutout
        ctx.globalCompositeOperation = "xor";
        ctx.fillStyle = "#fff";
        ctx.beginPath();  
        ctx.arc(x,y,r/2,0,pi*2,true); 
        ctx.fill();
    }

    function clear() {
      ctx.clearRect(0, 0, width, height);
    }

    function timeCheck(){
        if (complete>0){
            complete -= 1;
        }
        else {
            clearInterval(refreshInterval);
        }
    }

    function draw() {
      clear();
      circle(x, y, 20);
        timeCheck();
    }

    init();

});

I was hoping to avoid a flash animation or gif, but I might have no choice.

Thanks!

Upvotes: 1

Views: 1393

Answers (1)

Justin Peel
Justin Peel

Reputation: 47092

I don't really see any problems and I am using Chromium 8 and Firefox 3.6.13 on Linux.

However, if you still want suggestions for micro optimizations, then you can make things like -2*pi/100, 1.5*pi, and .5*pi as their own constants. Also, this is just a guess, but using "copy" instead of "xor" for ctx.globalCompositeOperation might be faster. You could also store the arc angle that is computed for the first arc drawn and use it for the second as well rather than just having it draw a full circle.

Upvotes: 1

Related Questions