Почему деформируется канвас

[Tit6ka]

При росте зеленого круга, серый круг начинает деформироваться. Как решить?

var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');
                    var centerX = 100;
                    var centerY = 100;
                    var radius = 80;

                    context.beginPath();
                    context.arc(centerX, centerY, radius, 0, 8);
                    context.fillStyle = '#EEEEEE';
                    context.fill();
                    context.lineWidth = 25;
                    context.strokeStyle = '#D9DBD8';
                    context.stroke();

                    context.beginPath();
                  context.arc(centerX, centerY, radius, 85 * (Math.PI / 180), 360/100 * (95.0833333333 - 175) * (Math.PI / 180));
                    context.fillStyle = '#EEEEEE';
                    context.fill();
                    context.lineWidth = 15;
                    context.strokeStyle = '#8AAD77';
                    context.stroke();
                    var centerX = canvas.width/2;
                    var centerY = canvas.height/2;
                    context.fillStyle = "#8AAD77";
                    context.font = "50pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText(8, centerX,centerY);
                    context.fillStyle = "#D9DBD8";
                    context.font = "20pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText("lvl", centerX,centerY+40);

https://jsfiddle.net/nanm5eym/

[рони]

Tit6ka,

<canvas id="myCanvas" width="200" height="200"></canvas>
                    <script>
                    var canvas = document.getElementById('myCanvas');
                    var context = canvas.getContext('2d');
                    var centerX = 100;
                    var centerY = 100;
                    var radius = 80;

                    context.beginPath();
                    context.arc(centerX, centerY, radius+10, 0, 8);
                    context.fillStyle = '#EEEEEE';
                    context.fill();
                    context.lineWidth = 5;
                    context.strokeStyle = '#D9DBD8';
                    context.stroke();

                    context.beginPath();
                    context.arc(centerX, centerY, radius, 85 * (Math.PI / 180), 360/100 * (80.0833333333 - 175) * (Math.PI / 180));
                    context.fillStyle = '#EEEEEE';
                    context.lineWidth = 15;
                    context.strokeStyle = '#8AAD77';
                    context.stroke();
                    var centerX = canvas.width/2;
                    var centerY = canvas.height/2;
                    context.fillStyle = "#8AAD77";
                    context.font = "50pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText(8, centerX,centerY);
                    context.fillStyle = "#D9DBD8";
                    context.font = "20pt Roboto";
                    context.textAlign = "center";
                    context.textBaseline = 'middle';
                    context.fillText("lvl", centerX,centerY+40);
                    </script>

[рони]

Tit6ka,
1 пост строка 18 лишняя

[Tit6ka]

спасибо