O Código funciona mas eu não entendi!

Olá! Assim que li o enunciado pensei que o programa devia fazer somente uma borda a mais e não fazer um quadrado branco! Pensando nisso eu escrevi o seguinte código!

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

<script>

    function desenhaQuadrado(x,y,tamanho,cor) {
        var tela = document.getElementById("tela");
        var pincel = tela.getContext("2d");

        pincel.fillStyle = cor;
        pincel.strokeStyle = "black";

        pincel.fillRect(x,y,tamanho,tamanho);
        pincel.strokeRect(x,y,tamanho,tamanho);

    }

    function desenhaBorda(x,y,tamanho,cor) {
        var tela = document.getElementById("tela");
        var pincel = tela.getContext("2d");

        pincel.strokeStyle = cor;
        pincel.strokeRect(x,y,tamanho,tamanho);
    }

    var tamanho = 50;
    var x = 0

    while(x <= tamanho*2) {
        desenhaQuadrado(x,0,tamanho, "green");
        x = x + tamanho;
        desenhaBorda(x,0,tamanho, "black");
    }

</script>

Em que pese ele funcione (e faça realmente uma borda a mais sem um quadrado), eu fiquei em dúvida do porque! Não sei se existe isso, ou se estou fazendo algo errado - de fazer o código, ele funcionar mas eu nao entender o porque. Tudo bem se meu codigo funcionar por acidente? hehe

Pela leitura do meu código, eu pensava que não haveria a pintura da ultima borda! Mas ele pinta mesmo assim!

Não sei se alguem consegue me explicar, mas ficaria grato se pudesse ver a opinao de vcs! Obg!