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

[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]

спасибо