Aula 2 lógica de programação II - Função Genérica - Quadrados.

Oi, então. Na aula dois desse curso no video ele cria duas funções para as mesmas coisas. Eu vi que poderia usar uma unica função genérica e apenas passar parâmetros diferentes, assim evita usar duas funções pra mesma coisa e melhora o código etc. Porém um parâmetro de string não está sendo lido, e acaba não passando as cores diferentes "green/red" isso acaba deixando as duas linhas de quadrados pretos. Poderiam me dizer o que está errado? E como posso arrumar. Aqui está o código PS: Eu tentei passar os parâmetros com e sem "aspas duplas" mas o resultado foi o mesmo.

<canvas id="tela" width="600" height="400">

</canvas>

<script>

    var desenhoQuadrado = function(altura,largura,color) {

        var tela = document.getElementById("tela");
        var c = tela.getContext("2d");

        c.fillStyle = "color";
        c.fillRect(altura,largura,50,50);

        c.strokeStyle = "black";
        c.strokeRect(altura,largura,50,50);
    }


    for(var altura = 0; altura < 600; altura +=50) {

        desenhoQuadrado(altura,0,"green");
        desenhoQuadrado(altura,50,"red");

    }

</script>


<!--  or with while 
    var altura = 0;

    while(altura < 600) {

        desenhoQuadrado(altura,0);
        altura +=50;

    }

</script> -->