[Duda] Ejercicio colores - Alcance de variables

el alcance de las variables en js es local cuando se usa dentro de las funciones es decir solo funcionan dentro de la funcion y global cuando son declaradas en el main se puede usar dentro de las funciones y afura de ellas

Hola compañero, te cuento que me pasó lo mismo cuando quería devolver el valor y enviarlo a la función de dibujarCirculo. Lo solucioné declarando la variable fuera.

Buenas noches! Basicamente lo que utilizamos son variables globales, las cuales podemos instanciar al comienzo y utilizarlas (metiendole datos) en cualquier función de nuestro código o en cualquier otra parte del archivo js. Lo que hacemos es crear una "variable global" y utilizarla como contador para así poder saber el numero de clicks derechos que damos en la pantalla (Esto lo contabilizamos con la función "alterarcolor").

Tambien, se declara un array "global" fuera de las funciones. Ya que no estamos trabajando con los parámetros de las funciones (Tranquilamente se puede hacer). Dependiendo de la cantidad de clicks que demos será el numero que estará guardado en la variable "contador". Y con ese numero podemos interactuar con el array y sus posiciones. En resumen la función alterarColor funciona para incrementar el contador en + 1.

Te dejo mi código y te comenté, en el código, esos puntos que mencionas.

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");


    var contador = 0;                            //Inicializamos el contador en 0
    var colores = ['blue', 'red', 'green'];        //Creamos el array con dichos colores


    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400);


        function dibujarCirculo(evento){

            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;

            pincel.fillStyle = colores[contador];  //Llamamos al array "colores" con el numero de posicion que va a tener el contador (En este caso el contador será : 0, 1 ó 2)
            pincel.beginPath();
            pincel.arc(x,y,10,0,2*3.14);
            pincel.fill();

            console.log(x + " , " + y);

        }

        function alterarColor(){

            if(contador == colores.length-1){  // Recordar que los array comienzan desde el 0.
                contador = 0;
            }else{                               

                contador++;

            }

            return false;

        }

        pantalla.oncontextmenu = alterarColor;
        pantalla.onclick = dibujarCirculo;

</script>

Saludos!!