[Duda] Pregunta con las funciones

Hola, en las funciones, noté que éstas logran utilizar las variables que están fuera de las mismas funciones, me explico:

Para la función changeColor, se toma el valor de colorStatus y el valor del tamaño del array, ambas variables están fuera de la función, lo mismo sucede en la función drawCircle, que toma el valor de colorStatus para tomar este nuevo color.

No recuerdo que algo así hubiera pasado antes, normalmente nosotros asignamos un parametro tipo function functionName (var1, var2, varN) y de ser necesario, tenemos un return(varA, varB, varM).

Mi pregunta es, ¿siempre se ha podido acceder a variables fuera de la función hasta ahora? ¿O solo sucede en casos específicos? Adjunto código de referencia y muchas gracias!

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>
<script>
    var pantalla=document.querySelector("canvas");
    var pincel=pantalla.getContext("2d");
    pincel.fillStyle="lightgray";
    pincel.fillRect(0,0,600,400);

    function drawCircle(event){
        var x=event.pageX-pantalla.offsetLeft;
        var y=event.pageY-pantalla.offsetTop;

        pincel.fillStyle=colors[colorStatus];
        pincel.beginPath();
        pincel.arc(x,y,10,0,2*3.1416);
        pincel.fill();
        console.log(x+","+y);

    }

    pantalla.onclick=drawCircle;

    var colors=["blue","red","green"];
    var colorStatus=0;

    function changeColor(){
        colorStatus++;
        if (colorStatus>=colors.length){
            colorStatus=0;
        }
        alert(colors[colorStatus]);
        return false;
    }

    pantalla.oncontextmenu=changeColor;


</script>