Parece uma Gambiarra?

Gilberto,

dá pra entender que fez um remanejamento, pra poder criar a última borda preta. Resolveu. Mesmo assim, é possível fazer uma limpeza no código.

Dá pra tirar a declaração de 'var tela' e 'var pincel' de dentro da function desenhaQuadro, pois elas já foram declaradas novamente no final.

O código ficaria assim:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');


    function desenhaQuadrado(x, y, tamanho1,tamanho2, cor){

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho1, tamanho2, cor);
        pincel.fillStroke = 'black';
        pincel.strokeRect(x, y, tamanho1, tamanho2, cor);
    }

    var x = 0;
    while(x < 150){
        desenhaQuadrado(x, 0, 50, 50,'green');
        x = x + 50;
    }

    pincel.fillStroke = 'black';
    pincel.strokeRect(x,0,50,50, 'black');

Se fosse fazer sem gambiarra, deveria haver uma função para os quadrados, e outra para as molduras, já que são quantidades diferentes.

Ou uma função que fizesse as duas, como você fez, mas que contemplasse a quantidade diferente de quadrados e de molduras vazias. Poderia ser assim:

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

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext ('2d');

    function desenhaQuadrados(quantQuad, corQuad, quantMold, corMold){

        for(x = 0; x < quantQuad * 50; x = x + 50){
            pincel.fillStyle = corQuad;
            pincel.fillRect(x, 0, 50, 50);
        }

        for(x = 0; x < quantMold * 50; x = x + 50){
            pincel.fillStroke = corMold;
            pincel.strokeRect(x, 0, 50, 50);
        }
    }

    desenhaQuadrados(3, "green", 4, "black");

</script>

Bons estudos!

Muito obrigado pela dica, com certeza me empenharei para deixar o código mais agradável de se ler!