[Duda] el valor del retorno se muestra indefinido

Se está llamando a la función moverDerecha() dentro del intervalo de tiempo establecido por setInterval(), esta función se ejecutará repetidamente y no terminará su ejecución hasta que se cumpla la condición del else y se detenga el intervalo con clearInterval(detener);. Esto significa que el valor de resultado no se establecerá hasta que la función haya terminado de ejecutarse, lo cual solo sucederá después de varias repeticiones dentro del intervalo de tiempo.

Por lo tanto, para mostrar el valor correcto de resultado, debemos esperar a que la función moverDerecha() termine de ejecutarse dentro del intervalo de tiempo y devuelva un valor explícito. Para lograr esto, podemos mover la instrucción document.write(resultado); dentro del bloque if del else, justo después de la instrucción console.log(derecha);. De esta manera, la instrucción se ejecutará solo cuando se cumpla la condición del else y la función haya devuelto un valor explícito.

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

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

    function disenharCircunferencia(x,y,radio){
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }    

    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
    }
    //var resultado = 0;
    var derecha = 0;

    function moverDerecha(){        

        if (derecha < 600){
            limpiarPantalla();
            disenharCircunferencia(derecha,20,10);
            derecha++;         
        }else{        
            console.log(derecha);//muestra 600
            resultado = derecha;//asigna 600 a resultado
            clearInterval(detener);//detiene el intervalo 
            document.write(resultado);

        }
    }


detener = setInterval(moverDerecha, 5);
var resultado = moverDerecha();//indica indefinido??.


</script> 

Gracias por responder. Pero la pregunta es otra. Es porque no obtengo el retorno de la función acá:

var resultado = moverDerecha();//indica indefinido??.

tenia la idea de recibir el 600 y luego hacer un IF donde detendría la ejecución del setInterval.

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

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

    function disenharCircunferencia(x,y,radio){
        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,radio,0,2*Math.PI);
        pincel.fill();
    }    

    function limpiarPantalla(){
        pincel.clearRect(0,0,600,400);
    }
    //var resultado = 0;
    var derecha = 0;

    function moverDerecha(){        

        if (derecha < 600){
            limpiarPantalla();
            disenharCircunferencia(derecha,20,10);
            derecha++;         
        }else{        
            console.log(derecha);//muestra 600
            resultado = derecha;//asigna 600 a resultado
            clearInterval(detener);//detiene el intervalo 
            //document.write(resultado);
            return resultado;
        }
    }

var resultado = moverDerecha();//no recibo el valor de retorno de la funcion
document.write(resultado);
detener = setInterval(moverDerecha, 5);

</script>