Unable to remove outline on HTML5 canvas arc

Question

I am attempting to make a sort of progress bar using HTML5 Canvas Arc's.

The issue I am having is that my arc has a dark outline around it which I cannot change the color of. Below is a picture showing what I mean.

enter image description here

The code I am using is as follows.

function drawArmor( percent ) {
    var canvas = document.getElementById('ArmorCanvas');
    var context = canvas.getContext('2d');
    var radius = 36;
    var startAngle = (3 * Math.PI) / 2;
    var percentLeft = 1;
    var endAngle = -(Math.PI/2) + (Math.PI * 2 ) * ( 1 - percent );

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;
    context.lineCap = 1;
    context.strokeStyle = '#FFF';
    context.arc(100, 100, radius, startAngle, endAngle, true);
    context.stroke();
}

function drawHealth( percent ) {
    var HealthText = document.getElementById( "HealthText" );
    HealthText.innerHTML = ( percent * 100 ) + "%";

    var canvas = document.getElementById('HealthCanvas');
    var context = canvas.getContext('2d');
    var radius = 26;
    var startAngle = (3 * Math.PI) / 2;
    var endAngle = -(Math.PI/2) + (Math.PI * 2 ) * ( 1 - percent );

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.lineWidth = 1;
    context.lineCap = 1;
    context.strokeStyle = '#00FE67';
    context.arc(100, 100, radius, startAngle - 0.00001, endAngle + 0.00001, true);
    context.stroke();
}

Any help is appreciated, thanks.

Looks like it's caused by anti-aliasing. You'll need to make the line thicker. http://stackoverflow.com/questions/6175042/canvas-arc-clearing — Jahed, Mar 29 '14 at 03:09

score 0 · Answer 1 · answered Mar 29 '14 at 04:39

Oops?

The code you present does not draw the image you present so I assume you're using different code that's causing your ring artifacts.

Anyway!

I do see that you're not beginning your path commands with beginPath (your context.arc is a path command).

The lack of beginPath causes the path to be redrawn with each new context.stroke command.

The accumulation of over-draws will cause the kind of artifacts that you describe.

The artifacting is likely caused by repeated overdrawing of the anti-aliasing on your stroke.

So...

Put context.beginPath before your context.arc commands and the artifacts might disappear.

If the artifacts don't disappear, we'll need to see your actual code.

Unable to remove outline on HTML5 canvas arc

1 Answers1