Intentando hacer un tablero de ajedrez con JavaScript usando canvas , pero el resultado no es el que esperaba.

 const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') //ctx.fillRect(0, 0, canvas.width, canvas.height); class Square { constructor(space, color, size) { ... } draw(x, y) { ctx.fillStyle = this.color ctx.fillRect(x, y, this.size, this.size) } } class Game { constructor() { this.squares = createBoard() } createPattern(length, size) { for (let i = 0; i < length; i++) { var xOffset = size * (i + 1) let color = '' for (let j = 0; j < length; j++) { var yOffset = size * i if (i % 2 === 0 && j % 2 === 0) { color = '#FFE9C4' } else { color = '#FFD58F' if (i % 2 != 0 && j % 2 != 0) { color = '#FFE9C4' } } const square = new Square(this.squares[(i*8) + j], color, 80) square.draw(xOffset, yOffset) } } } } ... game.createPattern(8, 80)

El tablero resultante no muestra un cuadrado en los intervalos esperados. No estoy seguro de dónde me equivoqué.