Por que o raio não muda de tamanho de um em um?

Fiz diferente do professor. Criei uma função com um laço que aumenta em 1 o tamanho do raio enquanto não chega no limite, que é 30, e que diminui em 1 enquanto não chega no mínimo, que é 20. Eu achei que ele pulsaria de um em um pixel, mas está seguindo este padrão. Até coloquei um console.log, e diminui a velocidade pra entender o que está acontecendo, mas não entendi a lógica... Alguém saberia explicar?

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 600, 400);

    var x = 300;
    var y = 200;
    var raio = 20;

    var limite = 30;

    function aumentaCirculo() {

    for (var i = 20; i <= limite; i++) {
        limpaTela();
        raio++;
    }
}

    function diminuiCirculo() {

    for (var i = 30; i <= raio ; i++) {
        limpaTela();
        raio--;
    }
}

    function desenhaCirculo(x, y, r, cor) {

    if (raio <= limite) {
        aumentaCirculo();
    } else {
        diminuiCirculo();
    }

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, r, 0, 2 * Math.PI);
        pincel.fill();
    console.log(raio);
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 600, 400);
    }

    function movimenta() {
        desenhaCirculo(x, y, raio, 'black');

    }

setInterval(movimenta, 1000);

</script>