Ugly effect rotating arcs on canvas

Question

I am drawing an arc and pretending that this is rotating. If the arc is small all its OK! but when I Increase it makes a wave effect. If you pay attention you can see a undulation effect.

Would it be possible to correct this issue?

http://jsfiddle.net/vTL3z/2/

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var zoom = 5;
var i = 0;
var px = canvas.width/2;
var py = canvas.height/2;
var radio = 80*zoom;
var startSegment, endSegment;

function draw(){
    window.requestAnimFrame(draw);
    ctx.clearRect(0,0,canvas.width,canvas.height);

    startSegment = i*Math.PI;
    endSegment = (i+1.5)*Math.PI;
    i = i + 0.01;

    ctx.beginPath();
    ctx.strokeStyle = '#99FF00';
    ctx.lineWidth = 2;
    ctx.arc(px,py,radio,startSegment,endSegment);
    ctx.stroke();
}


draw();  

Answer 1

This is clearly a browser issue (and should be reported to the Chromium team Reported here and here. Thanks to @ferow2k and @GameAlchemist for the links).

To get around this you can make your own arc clone:

function arc(ctx, x, y, radius, sa, ea) {

    var step = 0.01,
        a = sa + step;

        ctx.moveTo(x + radius * Math.cos(sa),
                   y + radius * Math.sin(sa));

    for(; a < ea; a+=step) {
        ctx.lineTo(x + radius * Math.cos(a),
                   y + radius * Math.sin(a));
    }
}

Then use it as:

//ctx.arc(px,py,radio,startSegment,endSegment);
arc(ctx, px,py,radio,startSegment,endSegment);

The step value can be calculated dynamically using the formula for circle circumference (Øxπ) divided down (to avoid too many overlaps):

var steps = radius * Math.PI * 0.25,
    step = Math.PI / steps;

I didn't make counter-clock-wise option for it but if you need that you should be able to make that with this as basis.

It will not be as performant as the built-in arc of course (but not bad either). You may have to adjust the step value for an even finer arc if you intend to draw it bigger. At least it will get you around the wobbling arc.

FIDDLE and FIDDLE (using dynamic step)