Quadrado "andante" custom

<canvas width="1920" height="1080"></canvas>

<script>

    var tamanho = 100;
    var largura = 600;
    var altura = 400;
    var velocidade = 10;
    var corBorda = "white";
    var corFundo = "black";
    var corQuadrado = "yellow";

    function desenha(cor, x, y){
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho);
        pincel.strokeStyle = corBorda;
        pincel.strokeRect(x, y, tamanho, tamanho);
    }

    const timer = (tempo) =>  {
        let time = tempo * 10
           return new Promise(res => setTimeout(res, time));
    }

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

    //Fundo
    pincel.fillStyle = corFundo;
    pincel.fillRect(0, 0, largura, altura);
    pincel.strokeStyle = corBorda;
    pincel.strokeRect(0, 0, largura, altura);

    //Grade
    for (var y = 0; y < altura; y = y + tamanho){
        for (var x = 0; x < largura; x = x + tamanho){
            desenha(corFundo, x, y);
        }
    }

    //Movimento
    async function anda() {
        for (var y = 0; y < altura; y = y + tamanho){
            for (var x = 0; x < largura; x = x + tamanho){
                desenha(corFundo,x-tamanho,y);
                desenha(corQuadrado,x,y);
                if (x >= (largura-tamanho)){
                    await timer(velocidade);
                    desenha(corFundo,largura-tamanho,y);
                }
                await timer(velocidade);
            }
        }
    }

    anda();    


</script>