Dei uma "incrementada" na brincadeira da bolinha

Dei uma incrementada no exercício da bolinha: coloquei para pedir login e senha, se digitar três vezes incorreto nao abre. Segurando o shift a bolinha aumenta o tamanho. Clicando no botão muda a cor da bolinha. E clicando com o botão direito muda a cor do fundo do canvas. Porém estou com duas situações: a primeira cor do fundo é cinza e quando clico a primeira vez com o botão direito para mudar ele "muda" a primeira vez para cinze e depois as outras cores, queria que fosse direto pra segunda cor. Outro problema é que quando clico para mudar a cor do fundo as bolinhas que já estão na tela somem. Como resolvo essas duas situações?

<meta charset="utf-8">

<canvas width="900" height="600"></canvas>

<button>Clique para mudar a cor</button>

<script>

    var button = document.querySelector('button');

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    var corFundo = ['grey', 'pink', 'brown', 'orange']
    var fundoAtual = 0;
    pincel.fillStyle = corFundo[fundoAtual];
    pincel.fillRect(0, 0, 900, 600);

    var indiceAtual = 0;
    var cores = ['green', 'yellow', 'blue', 'white']

    var loginCadastrado = 'alura';
    var senhaCadastrada = 'alura123';
    var loginDigitado = prompt('Digite seu login');
    var senhaDigitada = prompt('Digite sua senha');
    var tentativas = 1;


    if(loginCadastrado == loginDigitado && senhaCadastrada == senhaDigitada) {

        alert('Você está logado, pode começar a brincar!!!');

         function desenhaCirculo(coordenadasxy) {

             var x = coordenadasxy.pageX - tela.offsetLeft;
             var y = coordenadasxy.pageY - tela.offsetTop;
             var raio = 10;

             if(coordenadasxy.shiftKey) {

                 raio = raio + 30;
             }

             pincel.fillStyle = cores[indiceAtual];
             pincel.beginPath();
             pincel.arc(x, y, raio, 0, 2*Math.PI);
             pincel.fill();
        }

        function mudaCor() {

            indiceAtual++;

            if(indiceAtual >= cores.length) {

                indiceAtual = 0;
            }                 
        }

        function mudaFundo() {

             if(fundoAtual >= corFundo.length) {

                 fundoAtual = 0;
             }

             pincel.fillStyle = corFundo[fundoAtual];
             pincel.fillRect(0, 0, 900, 600);
             fundoAtual++;

             return false;
        }
    } else {

        while(tentativas < 3) {

            alert('login ou senha incorretos, tente novamente');
            prompt('Digite seu login');
            prompt('Digite sua senha');
            tentativas++;
        }
    }

    if(tentativas == 3) {

          alert("Número de tentativas excedido, procure o administrador do sistema");    
      }

    tela.onclick = desenhaCirculo;
    button.onclick = mudaCor;     
    tela.oncontextmenu = mudaFundo;

</script>