EX.2 Aula 4 - Movendo elementos

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

<script>

var tela = document.getElementById("tela");
var c = tela.getContext("2d");

var circulo = function(x, y, raio) {
    c.strokeStyle = "blue";
    c.beginPath();
    c.arc(x, y, raio, 0, 2 * Math.PI);
    c.stroke();
};

x = 1;

var desenha = function() {
    circulo(x, 100, x / 2);
    x = x + 1;
}

setInterval(desenha, 30);

</script>

Cara meu código está praticamente igual ao seu e funciona, a unica coisa que está diferente é onde você declara o X, por desencargo de consciência coloque um var x = 1;

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

<script>
    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");

    var circulo = function(x, y, raio)
    {
        c.strokeStyle = "blue";
        c.beginPath();
        c.arc(x, y, raio, 0, 2 * Math.PI);
        c.stroke();
    };

    x = 1;
    var desenha = function()
    {
        circulo(x, 100, x / 2);
        x = x + 1;
    }

    setInterval(desenha, 30)
</script>

Olá Guilherme e Carlos. Aparentemente parece não ter erro. mas por via das dúvidas, tente salvar o código em outro arquivo html e abra novamente e teste em outros navegadores.

Caso ainda não funcione, tente comparar com o meu código e também testar o meu, que está funcional.

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

<script>


    var tela = document.getElementById("tela");
    var c = tela.getContext("2d");


    var circulo = function(x,y,raio) {

        c.strokeStyle = "blue";
        c.beginPath();
        c.arc(x,y,raio, 0, 2*Math.PI);
        c.stroke();
    }

    var limpaTela = function() {

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

    var x = 1;

    var desenha = function() {

        circulo(x, 200, x/2);
        x++;
    }

    setInterval(desenha, 10);

</script>

Se sua dúvida for esclarecida não esqueça de marcar o tópico como solucionado para ajudar outras pessoas que tenham que possam ter o mesmos problemas s2