Alguém que saiba um pouco mais, ou que pense além... Tabuleiro de dama.

Acho que a melhor abordagem é desenha linha a linha, alternando as cores;

A minha solução foi assim:

<meta charset="UTF-8">

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

<script>
    const numeroLinhas = 8;
    const numeroColunas = 8;
    const tamanhoQuadro=50; //TAMANHO PADRÃO DO QUADRADO
    const cores=["white","black"]; //VETOR COM CORES POSSÍVEIS PARA O QUADRO

    function quadrado(x, y, color) {

        pincel.fillStyle = color;
        pincel.fillRect(x , y, 50, 50);
        pincel.fillStroke = "black";
        pincel.strokeRect(x, y, 50, 50);

    }

    //VERIFICA SE UM NÚMERO É IMPAR
    function ehImpar(numero){
        return numero%2;
    }



    function desenhaLinha(linha){
        let indexInicial = ehImpar(linha);//Indica qual a cor inicial do primeiro quadrado  da linha

        for(coluna = 0;coluna<numeroColunas;coluna++){
            let indexCor = ehImpar(indexInicial+coluna); //Alterna entre as cores possíveis
            let colunaAtual = coluna*tamanhoQuadro; //ajusta a coordenada da coluna
            let linhaAtual = linha*tamanhoQuadro; //ajusta a coordenada da linha
            let corAtual = cores[indexCor]; //Seleciona a cor
            quadrado(colunaAtual,linhaAtual,corAtual); //Desenha o quadrado
        }
    }

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

    // fundo
    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0 , 0, 600, 400);

    for (var linha=0;linha<numeroLinhas;linha++){ //desenha linhas
        desenhaLinha(linha);
    }


</script>