A stroke do último quadrado fica incompleta. | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

E resolvi usando if e else ao invés de repetir a função, mas por algum motivo o último quadrado fica com a stroke incompleta. O que pode ser?

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

<script>

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

    function desenhaQuadrado(x,y,tamanho, cor){

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

    var x = 0;

    while(x < 600){

        if(x < 450){
        desenhaQuadrado(x,0, 150, 'green');
        x = x + 150;
        }else{
        x = x + 150;
        desenhaQuadrado(x, 0, 150, 'white');
        }
    }


</script>