Consulta

Cordial saludos queridos compañeros Revisando el código me llegó una duda, porque la variable indiceColorActual que se actualiza en la función dibujarCirculo, esta variable se está modificando en la función alterarColor creía que las variables dentro de la función no salen a menos que se retorne el dato, traté de hacer un console.log (indiceColorActual) por fuera de la función y no me muestra nada, gracias por sus comentarios.

let pantalla = document.querySelector("canvas");
let pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
let colores = ["blue", "red", "green"];
let indiceColorActual = 0; // comienza con blue

function exibiralerta(evento)
{
    let x = evento.pageX - pantalla.offsetLeft; /* lugar en x y resta la parte izquierda para que quede solo con el canva */
    let y = evento.pageY - pantalla.offsetTop; /* lugar en y y resta la parte superior para que quede solo con el canva */
    alert(x + " , " + y);
}

function alterarColor() {
    indiceColorActual++;
    if(indiceColorActual>= colores.length) {
         indiceColorActual = 0; //vuelve para el primer color, blue
    }
    return false; //menú contextual padrón de `canvas` no sea exhibido
}



function dibujarCirculo(evento)
{

    let x = evento.pageX - pantalla.offsetLeft; 
    let y = evento.pageY - pantalla.offsetTop; 
    pincel.fillStyle = colores[indiceColorActual]; /* DEFINE EL COLOR DE RELLENO */
    pincel.beginPath(); /* INICIAR EL CAMINO */
    pincel.arc(x,y,10,0,2*3.14)
    pincel.fill();
    console.log(x + " , " + y)

}

console.log(indiceColorActual); 
pantalla.oncontextmenu = alterarColor;

pantalla.onclick = dibujarCirculo;