Attempting to make a chessboard with JavaScript using canvas
, but my code is only displaying a blank screen when I go to test.
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)
}
}
}
}
I used some console.log()
print checks in the createPattern
function and they returned when they were supposed to, so I figure there is something I am missing that physically allows the canvas to draw what I want.
Assume that I have code to initialize createPattern
after this code block.