Raio de alvo não diminui

Tentei criar um programa que mostra um alvo no centro da tela. Ao se clicar na região central do alvo, o alvo é redesenhado com raio menor. O alvo é constituído de 3 círculos, porém um deles (o maior) não diminui como os outros. Alguém poderia me indicar onde está o problema? Grato desde já.

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

<script>

    var canvas = document.querySelector("canvas");
    var colorir = canvas.getContext("2d");

    var raio = 20;
    var raioAtual = 0;

    colorir.fillStyle = "lightgray";
    colorir.fillRect(0, 0, 600, 400);

    raioAtual = raioAtual + raio;

    function criaAlvo (raioAtual){

        colorir.fillStyle = 'red';
        colorir.beginPath();
        colorir.arc(300, 200, raioAtual+35, 0, Math.PI*2);
        colorir.fill();

        colorir.fillStyle = 'white';
        colorir.beginPath();
        colorir.arc(300, 200, raioAtual+20, 0, Math.PI*2);
        colorir.fill();

        colorir.fillStyle = 'red';
        colorir.beginPath();
        colorir.arc(300, 200, raioAtual, 0, Math.PI*2);
        colorir.fill();

    }

    canvas.onclick = function (mouseClick){

        var x = mouseClick.pageX - canvas.offsetLeft;
        var y = mouseClick.pageY - canvas.offsetTop;

        if(raioAtual<=0){
            alert("O raio já atingiu seu limite inferior");

        }else{
        if(x>= 300 - raioAtual && x<= 300 + raioAtual ){
            if(y >= 200 - raioAtual && y<=200+raioAtual){
                console.log("acertou");
                raioAtual = raioAtual - 5;
                criaAlvo(raioAtual);    

            }
        }
        }
    console.log(x + "," + y);}

    criaAlvo(raioAtual);

</script>