Question

I’m trying to draw a circle on a canvas and it’s generating as follows:

, and zoomed:

I’m not sure why this is happening, though I’ve seen the effect before and I suspect it’s something to do with partial pixels (though afaict I’m not doing that). A working example can be seen at this jsfiddle.

To summarise the code, I’m using a function to draw the circle. I draw both the inside and outside edge progressively inwards, adjusting the alpha as I go. The code can be seen below:

function drawCircle(x, y, radius, startAngle, endAngle, antiClockwise, lineWidth, r, g, b, a) {
    c.beginPath(); 

    var w = Math.abs(lineWidth / 2);

    var alphaFactor = a / w;
    var alpha = alphaFactor;

    var outer = radius + w;
    var inner = radius - w;

    // draw centre line
    c.lineWidth = 1;
    c.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    c.arc(x, y, radius, startAngle, endAngle, true); 
    c.stroke();

    for(i = 0; i < w; i++, inner++, outer--, alpha += alphaFactor) {
        // draw inner
        c.beginPath(); 
        c.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
        c.arc(x, y, inner, startAngle, endAngle, true); 
        c.stroke();

        // draw outer
        c.beginPath(); 
        c.arc(x, y, outer, startAngle, endAngle, true); 
        c.stroke();
    }
};

I believe that I can use a radial gradient to solve this problem (which I presume will be faster, depending on the width of the line), however I would like to understand why the affect shown above occurs.

Answer 1

I fixed the problem by not drawing individual lines and just drawing one line with a radial gradient that recreated the effect I am looking for:

This appears (afaict) to be a lot more efficient as it’s only using one fill, instead of multiple strokes.

The solution can be seen at this JSFiddle, while the code is quite small:

$(function () {
  draw(document.getElementById('canvas').getContext('2d'));

  function draw(ctx) {
    var radgrad = ctx.createRadialGradient(60, 60, 0, 60, 60, 60);
    radgrad.addColorStop(0.8, 'rgba(255,0,0,0)');
    radgrad.addColorStop(0.85, 'rgba(255,0,0,.6)');
    radgrad.addColorStop(0.9, 'rgba(255,0,0,1)');
    radgrad.addColorStop(0.95, 'rgba(255,0,0,.6)');
    radgrad.addColorStop(1, 'rgba(255,0,0,0)');

    ctx.fillStyle = radgrad;
    ctx.arc(60, 60, 60, 0, 2 * Math.PI, true);
    ctx.fill();
  }
});

I derived my solution from the solution to another question.