Minha ideia foi especificar o tamanho do lado para um tabuleiro de xadrez.
Uma vez pronta a função de quadrados com contornos, pode-se definir se ele fica "sem contorno" (= tem o contorno da cor do corpo)
Os índices dos loops "for" para linhas e colunas, se pares ou ímpares, definem o padrão de alternância de cores.
Código:
<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext ('2d');
function desenhaQuadrado (origemX, origemY, lado, preenche, contorno) {
// estilo de preenchimento
pincel.fillStyle = preenche;
// quadrado
pincel.fillRect (origemX, origemY, lado, lado)
// estilo de tracado
pincel.strokeStyle = contorno;
// contorno do quadrado
pincel.strokeRect (origemX, origemY, lado, lado)
}
function tabuleiroXadrez (tamanhoLado){
// para cada linha do tabuleiro
for (i=0; i<8; i++){
if ((i%2)==0){
// se for linha impar - observando que a indexacao comeca de zero
// começa com quadrado branco
for (j=0; j<8; j++){
if ((j%2)==0){
// se for coluna ímpar - observando que a indexacao comeca de zero
// desenha quadrado branco
desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'white', 'black');
}
else {
// se for coluna par
// desenha quadrado preto
desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'black', 'black');
}
}
}
else {
// se for linha par - observando que a indexacao comeca de zero
// começa com quadrado preto
for (j=0; j<8; j++){
if ((j%2)==0){
// se for coluna ímpar - observando que a indexacao comeca de zero
// desenha quadrado preto
desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'black', 'black');
}
else {
// se for coluna par
// desenha quadrado branco
desenhaQuadrado ((tamanhoLado*i), (tamanhoLado*j), tamanhoLado, 'white', 'black');
}
}
}
}
}
tabuleiroXadrez (40);
</script>