Attempting to make a chessboard with JavaScript using canvas, but the result is not what I am expecting.

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)

The resulting board does not display a square at the expected intervals. Unsure where I misstepped.