Javascript 为什么画布上的上一个圆圈的属性会被更新的属性所取代？

我有画布，我想画一个内圈，在它上面画一个外圈。第一条红线显示在圆圈中间。其次，我想把外圈的

线宽
设为5，它也把外圈设为5。
如何阻止这一切

我的代码



函数drawCircle（）{
var circleCanvas=document.getElementById（“myCircleCanvas”）；
var circle=circleCanvas.getContext（“2d”）；
circle.beginPath（）；
var x=95；
变量y=75；
var半径=60；
圆弧（x，y，半径，0，2*Math.PI）；
圆圈。笔划（）；
circle.fillStyle='#505050'；
圈。填充（）；
circle.fillStyle='#fff'；
var font=“bold”+半径/3+“px衬线”；
circle.font=font；
圆圈。填充文字（“AVAYA”，x-x/3，y-y/5）；
circle.fillStyle='#000'；
圆圈。填充文本（“CIE”，x-x/3+15，y-y/5+25）；
圆弧（x，y，半径+10,0,2*Math.PI）；
circle.lineWidth=5；//只想增加外圆
circle.stroke（）；//为什么要画额外的线
}

您的浏览器不支持HTML5画布标记。
如果要独立处理这两个圆，请关闭开始的路径，并在绘制第二个圆之前开始新的路径。例如：

function drawCircle() {
    var circleCanvas = document.getElementById("myCircleCanvas");
    var circle = circleCanvas.getContext("2d");
    circle.beginPath();
    var x = 95;
    var y = 75;
    var radius = 60;

    circle.arc(x, y, radius, 0, 2 * Math.PI);
    circle.stroke();

    circle.fillStyle = '#505050';
    circle.fill();
    circle.fillStyle = '#fff';

    var font = "bold " + radius / 3 + "px serif";
    circle.font = font;
    circle.fillText("AVAYA", x - x / 3, y - y / 5);

    circle.fillStyle = '#000';
    circle.fillText("CIE", x - x / 3 + 15, y - y / 5 + 25);

    circle.closePath();
    circle.beginPath();

    circle.arc(x, y, radius + 10, 0, 2 * Math.PI);
    circle.lineWidth = 5;//just want to increase outer circle
    circle.stroke(); //why drawing extra line

    circle.closePath();
}