Q:

Painting inner circle with javaScript

Can someone explain why the inner circle is being painted? My code make circles and when it completes 360 degree it paints the whole canvas again. I thought it would only paint balls on the border of the new circle. Just to let it more clear (maybe). I would like to paint only the circles and not the center of the movemente. The Idea was to form a contour on the circle's movement with the balls and make a new one, every 360 degree (the reason why I call drawStage).
images of the problem:
https://imgur.com/pj3BtI4
https://imgur.com/Iaj4pfv
the part that I painted red is the problem
HTML CODE (tela.html)
<!DOCTYPE html>
<html>
<title>JS Game</title>
<body>
<h1>JavaScript Game</h1>
<canvas id="tela"></canvas>

<script src="Game.js"></script>
</body>

</html>

JavaScript code (Game.js)
console.log("Starting Game");
var canvas = document.querySelector('#tela');
var stageCollor = 'black';
var ballColor = 'grey';
console.log(canvas);
var stage = canvas.getContext('2d');
var ball = canvas.getContext('2d');
drawStage();
let distanceFromCenter = 0;
let startWidth = canvas.width/2;
let startHeight = canvas.height/2;
let ballRadius = 10;
let startAngle = 0;
let endAngle = 2 * Math.PI;
let turnedAngle = 0;
let piTurnedAngle= 0;
ball.arc(startWidth, startHeight, ballRadius, startAngle, endAngle);
ball.stroke();//draw
ball.fillStyle = ballColor;
ball.lineWidth = 1;
ball.fill();

setInterval(move,40);//magic

function move() {
    //drawStage();
    turnedAngle = turnedAngle +5;
    piTurnedAngle = turningMovement(turnedAngle);
    distanceFromCenter = distanceFromCenter +0.0125;
    startWidth = startWidth + distanceFromCenter*Math.cos(piTurnedAngle);
    startHeight = startHeight - distanceFromCenter*Math.sin(piTurnedAngle);
    drawBall();
}

function drawBall() {   
    ball.arc(startWidth, startHeight, ballRadius, startAngle, endAngle);
    ball.stroke();//draw
    ball.fillStyle = ballColor;
    ball.lineWidth = 1;
    ball.fill();
    console.log('d - ' + startWidth);
}

function eraseBall() {  
    ball.arc(startWidth, startHeight, ballRadius, startAngle, endAngle);
    ball.stroke();//draw
    ball.fillStyle = stageCollor;
    ball.lineWidth = 1;
    ball.fill();
    console.log('e - ' + startWidth);
}

function drawStage(){
    canvas.width = 800;
    canvas.height = 600;
    stage.fillStyle = stageCollor;
    stage.fillRect(0,0,canvas.width, canvas.height);
    stage.beginPath();
}

function turningMovement(angle){
    if(angle>360){
        angle = angle%360;
        if (angle == 0){
            drawStage();
        }
    }
    newAngle = angle/180;
    newAngle = newAngle*Math.PI;
    return newAngle;
}

A:

This happens because the canvas is filling up the path drawn between various balls. You periodically call arc() within drawBall(), but you never call beginPath() or endPath().
This is the simplest example I can think of (using your JS code) to illustrate the problem: remove the setInterval() line so that the animation does not start. Then run the following in console:
drawStage();
turnedAngle = 10; startWidth = 404.45625508238027; startHeight = 299.2142419960571; drawBall();
turnedAngle = 70; startWidth = 423.114564032465; startHeight = 280.45069066017015; drawBall();
turnedAngle = 150; startWidth = 408.03409582988786; startHeight = 248.52411884675797; drawBall();

Note the triangle being drawn across the 3 balls. 
To solve this, simply add ball.beginPath() before your arc() call.

