Remove Flickering from drawing certain animations in HTML5 Canvas

Question

I've started with splitting up a circle into separate segments to make each one a menu item.

<canvas id="myCanvas" width="500" height="500"></canvas>

using the script:

var sec = 0;

    $(document).ready(function(){ 

        var redrawTimer = setInterval(function(){
            // start drawing the chart
            init(); 
            //Increment Counter
            sec++;

            if( sec == 200 ){//After 2 Secs, Stop animation
                clearInterval(redrawTimer);
                clearInterval(this);
            }
        },10);


    });
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // center the drawing
    var x = canvas.width / 2;
    var y = canvas.height / 2;

    // number of days
    var days = 2;

    // number of segments
    var hours = 8;
    var hoursFull = 1;

    // one segment represents a menu item so divide degrees by hours
    var segmentWidth = 352 / hours;
    var segmentWidthFull = 360 / hoursFull;

    // begin at 0 and end at one segment width
    var startAngle = 1;
    var startAngleFull = 1;
    var endAngle = segmentWidth;
    var endAngleFull = segmentWidthFull;

    // how thick you want a segment
    var segmentDepth = 80;

    function init(){
        for(var i=1; i <= days; i++) {
            drawSegments(i*segmentDepth, i, sec);
        } 
    }
    var prevStart = 1;
    var prevEnd = segmentWidth;
    function drawSegments(radius,dayNumber) {   

        for(var i = 0; i < hours; i++){         
            context.beginPath();

            if( dayNumber == 2 ){
                context.strokeStyle = '#f7941e';
                if( i == 0 ){
                    prevStart = startAngle;
                    prevEnd = endAngle;
                    startAngle = 271 + sec;
                    endAngle = segmentWidth + 271 + sec;
                    context.strokeStyle = '#fff';
                }else{
                    startAngle = prevStart;
                    endAngle = prevEnd;
                }
            }
            else{
                context.strokeStyle = 'rgba(0,0,0,0)';
            }

            context.arc(x, y, radius, (startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false);
            context.lineWidth = segmentDepth;

            context.stroke();  
            startAngle += segmentWidth + 1;
            endAngle += segmentWidth + 1;
        }
    }

I understand that redrawing the image continuously is causing the flickering. Is there a way to fix this, as I'm not using an image to load into cache to increase the draw time?

I am a newb when it comes to canvas, so any help will be appreciated.

I've created an example

Answer 1

Your design needs are not clear from your question, but here are some utility functions for you.

A Demo: http://jsfiddle.net/m1erickson/Te6N8/

This function will draw your 8-arc gold circle:

    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var radius=110;
    var arcCount=8;
    var angleIncrement=PI2/arcCount;
    var divider=PI2/90;
    var startTime;


    function drawGoldArcs(){
        ctx.strokeStyle="gold";
        for(var i=1;i<=arcCount;i++){
            var starting=angleIncrement*(i-1);
            var ending=angleIncrement*(i)-divider;
            ctx.beginPath();
            ctx.arc(cx,cy,radius,starting,ending);
            ctx.stroke();
        }
    }

This function will draw your animated white arc based on elapsed time:

    function drawWhiteArc(elapsed){
        var starting=PI2*elapsed/animationDuration-divider;
        var ending=starting+angleIncrement;
        ctx.beginPath();
        ctx.arc(cx,cy,radius,starting,ending);
        ctx.strokeStyle="white";
        ctx.stroke();
    }

And this function uses requestAnimation to animate the white arc around the gold arcs:

    function animate(time){
        if(!startTime){startTime=time;}
        var elapsed=time-startTime;
        if(elapsed<animationDuration){requestAnimationFrame(animate);}

        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawGoldArcs();
        drawWhiteArc(elapsed);
    }