Funciona na horizontal, mas não na vertical.

Boa tarde, tudo bem?

Acho que não entendi direito a sua dúvida. Você quis dizer que não consegue fazer quadrados para frente e só pra baixo?

Caso seja isso, você precisa se atentar para a existencia do eixo X (horizontal) e do eixo Y (vertical). Na função "square()" que você escreveu com o objetivo de desenhar os quadrados, você insere nela, como parâmetros, um valor para x e um valor para y, valor este que irá demarcar a posição do quadrado no eixo x e y, respectivamente.

Na hora de chamar a função, eu vi que você colocou a mesma posição x para todos os quadrados e só mudou o valor de y, de forma que a posição dos quadrados só vai mudar na vertical (eixo y).

Pra mudar a posição dos quadrados no eixo x, você deve mudar o valor de x e não de y, da seguinte forma:

square(0,0,50,50,"green","red");
square(50,0,50,50,"yellow","red");
square(100,0,50,50,"blue","red");
square(150,0,50,50,"grey","red");

Espero ter ajudado, bons estudos!

Olá Vitor, boa noite.

Você colocou brush.strokeStyle. ** tente assim: brush.fillStroke: **

    function square(x,y,b,h,colorStyle,colorStroke) {
        var screen = document.querySelector("canvas");
        var brush = screen.getContext("2d");

        brush.fillStyle = colorStyle;
        brush.fillRect(x,y,b,h);
        brush.strokeStyle = colorStroke;  //
        brush.strokeRect(x,y,b,h);// body...
    }