[Duda] Cuando usar comillas y cuando quitarlas

Buen día, En el curso de Lógica de Programación, practicando con Juegos y Animaciones, En el tema 03. Una función más genérica

se tiene el siguiente código:

<canvas height="600" width="300"></canvas>
<script>
    function dibujarCuadrado(x,y,color){
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,50,50);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y,50,50);
    }
    dibujarCuadrado(0,0,"green");
    dibujarCuadrado(0,50,"yellow");
    dibujarCuadrado(0,100,"red");


</script>

El instructor cambio el parámetro pincel.fillStyle de red a color que se definió en el function dibujarCuadrado, sin embargo, cuando lo cambio le quito las comillas y el programa funciono de forma correcta, pero no entendí bien por qué quito las comillas, en otras palabras

Código inicial:

 pincel.fillStyle = "red";

Código final:

 pincel.fillStyle = color;