El if se implemente en 2 funciones diferentes, porqué?

Hola!

Creo que puedo entender por qué la bola púrpura se mueve también.

Esto se debe a que está utilizando la misma función cleanScream y dicnarCircunferencia para la bola roja y la púrpura y con las mismas variables.

En el código de abajo, he creado una función cleanScream2 y dicnarCircunferencia2 específicas para la bola púrpura, además de crear una nueva variable para su posición, que llamé "a" en lugar de "x":

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

    </canvas>


    <script type="text/javascript">

        //instrucciones para que javascript interactúe con canvas
        var scream = document.querySelector("canvas");
        var pincel = scream.getContext("2d");
        //color de relleno del canvas
        pincel.fillStyle = "lightblue";
        pincel.fillRect(0, 0, 600, 600);

        //dibuja los círculos en el canvas
        function dicnarCircunferencia(x, y, radio, color){

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

        }

        function dicnarCircunferencia2(a, b, radio, color){

            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(a, b, radio, 0, 2*Math.PI);
            pincel.fill();

        }

        //Borra los círculos de la pantalla 
        function cleanScream(x, y, largo, alto){

            pincel.clearRect(x, y, largo, alto);
            pincel.fillStyle = "lightgreen";
            pincel.fillRect(x, y, largo, alto);

        }

        function cleanScream2(a, b, largo, alto){

            pincel.clearRect(a, b, largo, alto);
            pincel.fillStyle = "lightgreen";
            pincel.fillRect(a, b, largo, alto);

        }

        //variable para almacenar posición en x
        var x = 0;
        var a = 0;
        var orient = 1;

        //función que dibuja el círculo y luego limpia la pantalla
        function bolauno(){

            cleanScream(0, 0, 600, 40);

            if (x > 590) {

                orient = -1;

            }
            else if(x < 5){

                orient = 1;

            }

            dicnarCircunferencia(x, 20, 10, "red");
            x = x + orient;

        }

        //función que dibuja el círculo y luego limpia la pantalla
        function bolados(){

            cleanScream2(0, 50, 600, 40);
            dicnarCircunferencia2(a, 70, 10, "purple");
            ;

        }

        //función interna de js que ejecuta la instrucción en los intervalos definidos
        setInterval(bolauno, 100);    
        document.write("<br>");    
        document.write("<br>");    
        setInterval(bolados, 500);

    </script> 

Si ejecutas este código, verás que la bola roja se mueve mientras que la púrpura no porque no estoy actualizando su valor "a" al final de la función.

Un saludo!

Si, comprendo. Muchas gracias.