I drew a circle using the HTML canvas arc method, but I want to remove the border of the circle. I tried to set lineWidth = 0 but it doesn't seem to work. Is there a way to remove the border of a circle in canvas?

$(document).ready(function() {
    pie_chart = $('#pie_chart');
    var p = pie_chart[0].getContext('2d');

    var canvas_width = pie_chart.width();
    var canvas_height = pie_chart.height();

    p.beginPath();
    p.arc(canvas_width/2, canvas_height/2, 150, 0 , Math.PI * 2);
    p.lineWidth = 0;
    p.stroke();
    p.fillStyle = '#777';
    p.fill();
});

I drew a circle using the HTML canvas arc method, but I want to remove the border of the circle. I tried to set lineWidth = 0 but it doesn't seem to work. Is there a way to remove the border of a circle in canvas?

$(document).ready(function() {
    pie_chart = $('#pie_chart');
    var p = pie_chart[0].getContext('2d');

    var canvas_width = pie_chart.width();
    var canvas_height = pie_chart.height();

    p.beginPath();
    p.arc(canvas_width/2, canvas_height/2, 150, 0 , Math.PI * 2);
    p.lineWidth = 0;
    p.stroke();
    p.fillStyle = '#777';
    p.fill();
});

• javascript
• canvas
• html5-canvas

• 2 Set stroke colour to be equal to fill colour? – Amadan Commented Apr 23, 2015 at 2:27
• @Amadan either that or transparent – Andrew Koroluk Commented Apr 23, 2015 at 2:30

1 Answer 1

The simple answer is: just drop the stroke() call:

p.beginPath();
p.arc(canvas_width/2, canvas_height/2, 150, 0 , Math.PI * 2);
p.lineWidth = 0;
//p.stroke();
p.fillStyle = '#777';
p.fill();