Desplazamiento de la circunferencia | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

Buenas tardes a tod@s, al realizar el código, se me ocurrio colocarle mi nobre en la función dibujarCircunferencia(); al final de las líneas de código, con el fin de que este se desplazara junto a la circunferencia, pero al llamar la función, solo me muestra el nombre, intenté realizando una función diferente y la llame nombre incluso quise darle coordenadas, al llamarlas a ambas, me ocurria igual, pero esta vez intentaba mostrarme la circunferencia y luego desaparece. Mi conclusión a esto es que mi nombre se antepone a la circunferencia, es decir el script se sobrepone sobre el canvas ¿Estaré en lo cierto? Ahora como hago para que el nombre nbo se sobreponga y me muestre ambos. Otro detalle que observé es que el nombre recorre toda la pagina del navegador, la circunferencia solo la pantalla del canvas, por esto llegue a la determinación anterior.

Mil gracias por la atención.

saludos cordiales y apretón de mano desde Medellín - Colombia

Aquí mi código...

Data: claro está que si comento el llamado a la función actualizarPantalla2, la circunferencia me corre normalmente.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CIRCUNFERENCIA CON DESPLAZAMIENTO</title>
</head>
<h1></h1>
<canvas width="600" height="400"></canvas>
<body>

    <script>

        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = "grey";
        pincel.fillRect(0,0,600,400);

        function dibujarCircunferencia(x,y,radio){

            pincel.fillStyle = "green";
            pincel.beginPath();
            pincel.arc(x,y,radio,0,2*Math.PI);
            pincel.fill();

        }

        function nombre(x,y){

            document.write("EstiwarZM");
        }

        function saltoLinea (){

            document.write("<br><br>");
        }


        function limpiarPantalla(){

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

        }

        var x = 0;   //variable para acumular el incremento en la función actualiarPantalla();

        function actualizarPantalla() {

            limpiarPantalla();
            dibujarCircunferencia(x,20,10);
            x++        //Incrementador para la variable x
        }

        function actualizarPantalla2() {

            limpiarPantalla();
            nombre(x,50);
        }

        setInterval(actualizarPantalla2,500); //Indagar como hacer para que el script no se sobreponga ante el canvas oeste quede dentro del canvas
        setInterval(actualizarPantalla,100);


    </script>

</body>
</html>