Question

Here is example:
http://jsfiddle.net/pcNzb/9/

I just study, so i must have missed something or have done something wrong. 🙂

See the gap between arcs? I’m building full circle with small arcs. I know how to fix it but i guess it’s better to avoid redrawing full arc on each step or i’m wrong?

I found another solution, with offset. Setting offset moveToRad+0.009

ctx.arc(x(),y(),radius,-moveFromRad,-moveToRad-0.009,antiClockwise);

to overlap one arc part over another, but that becomes visible if i’m using rgba alpha to 0.5 for example.

Is there some else fix for it excepting the full circle redraw on each step?

Answer 1

Is there some else fix for it excepting the full circle redraw on each step?

In short no, not if you want it to work cross-browser and look nice with semi-transparent colors.

That means, modifying your code to clear on each draw and eliminate the start angle step: http://jsfiddle.net/pcNzb/10/

see the two !!!-marked comments:

var interval=setInterval(function(){
    if(stop) {
        return;
    }
    // Log current state
    log.prepend('<tr><td>We are at PIradians '+moveToRad/Math.PI+'</td><td>, radians '+moveToRad+'</td><td>, degrees '+Math.round(moveToRad*180/Math.PI)+'</td></tr>');

    // console.log('We are at PIradians',moveToRad/Math.PI,', radians',moveToRad,', degrees',Math.round(moveToRad*180/Math.PI));

    // Clear after full cycle
    if(moveToRad>=fullCycle){
        cycle();
    }
    clear(); // !!! gotta clear!

    // Create arc
    // 0.01 fix offset, to remove that gap between arc parts
    ctx.arc(x(),y(),radius,-moveFromRad,-moveToRad,antiClockwise);

    // Draw arc line
    ctx.stroke();

    // Recalculate text width
    txtsizes=ctx.measureText(cycles);
    // Text width/2 and font-size / 3 to ~center the text in circle
    ctx.fillText(cycles, x(-txtsizes.width/2), y(font_height/3));

    // Don't redraw full arc from the start, draw from the last point
    //moveFromRad+=step; // !!! no more me!
    // Increment radian for the next step
    moveToRad+=step;

    ctx.beginPath();                
},period);