Olá, Lucas, tudo bom?
Notei algumas coisas no seu código. Vamos realizar um debug?
Passo 1: Código e variáveis inicializadas:
cor = white;
verificador = 1
Passo 2: Começam os While, o quadrado é desenhado com a cor WHITE.
Passo 3: O teste de cor é realizado, como o verificador==1, a cor mudará para black
Passo 4: Incrementa 1 no col e no verificador
Passo 5: Volta-se ao for, coluna 2. Desenha o quadrado com a cor do verificador, ou seja, BLACK.
Passo 6: O teste de cor é realizado, como o verificador==2, a cor mudará para white.
Passo 7: Incrementa 1 no col e no verificador
E assim por diante até o col 8:
Passo 23: Volta-se ao for, coluna 8. Desenha o quadrado com a cor do verificador, ou seja, BLACK.
Passo 24: O teste de cor é realizado, como o verificador==2, a cor mudará para white.
Passo 25: Incrementa 1 no col e no verificador
Passo 26: Acaba o primeiro laço. agora incrementa 1 no row, o verificador assume o valor de row, ou seja, verificador = 2 e col = 1 novamente
Passo 27: Voltando ao while pois col = 1, o quadrado é desenhado com a cor que estava, ou seja, WHITE.
Passo 28: O teste de cor é realizado, como o verificador==2, a cor PERMANECERÁ em white.
Passo 29: Incrementa 1 no col e no verificador
Passo 30: Volta-se ao for, coluna 2. Desenha o quadrado com a cor do verificador, ou seja, WHITE.
Passo 31: O teste de cor é realizado, como o verificador==3, a cor mudará para BLACK.
E assim sucessivamente.
Assim, seguem as minhas sugestões para o seu código:
1) Você inicializa o verificador como 1 e a cor como white, porém logo depois, é definido que a cor branca aparecerá quando a variável verificador for par. Não seria interessante já inicializar o verificador como 1 e inverter para quando o verificador for um número par, a cor será BLACK e verificador ímpar faz a cor WHITE.
2) Você primeiro desenha o quadrado com a cor (que no começo é branca) e DEPOIS verifica qual será a cor, ficando essa cor para a próxima vez que o quadrado for desenhado. Para melhor entendimento (imagine-se lendo esse programa daqui a 10 anos), sugiro colocar o teste antes de desenhar o quadrado, pois assim o teste da cor será para a coluna e linha atual e não para a seguinte.
3) Quando acabam-se as colunas, ele adiciona um nas linhas, atribui ao verificador o valor da próxima linha e retorna para desenhar as colunas. Porém, como o teste das cores acontece APÓS o desenho do quadrado e no final da coluna 8 estava uma cor, ele irá desenhar o quadrado e depois aplicará o reset das cores que vc configurou. Fazendo os passos 1 e 2, você contorna isso.
Segue a minha sugestão de modificação:
// função desenhaQuadrado(posição X: posiX, posição Y: posiY, largura: wid, altura: hei, cor: cor)
// Ex: desenhaQuadrado(100, 0, 50, 50)
function desenhaQuadrado(posiX, posiY, wid, hei, cor) {
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = cor;
pincel.fillRect(posiX, posiY, wid, hei);
pincel.strokeStyle = 'black';
pincel.strokeRect(posiX, posiY, wid, hei);
}
var col = 1;
var row = 1;
var x = 0;
var y = 0;
var cor = 'white';
var verificador = 1;
while (row <= 8) {
while(col <= 8) {
if( verificador % 2 == 0){
cor = 'black';
}
else {
cor = 'white'
}
desenhaQuadrado(x, y, 50, 50, cor);
x += 50;
col++;
verificador ++;
}
row++;
verificador = row;
y += 50;
col = 1;
x = 0;
}
