How can I change the fill colors of each box for a chessboard in JS, using Canvas?

Question

I just had a quick thought in mind of drawing a chessboard using JS and Canvas, and I have this code that draws the boxes alright with for loops.

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

var x, y,
  boxWidth = 30,
  boxHeight = 30;

for (x = 0; x < canvas.width; x += boxWidth) {
  for (y = 0; y < canvas.height; y += boxHeight) {
    ctx.beginPath();
    ctx.rect(x, y, boxWidth, boxHeight);
    ctx.stroke();
    ctx.closePath();
  }
}

<canvas id="canvas" width="240" height="240"></canvas>

Now I'm wondering how I can access each odd box on the axes to change their fill colors (e.g. black, white, black, white, and so on).

I know using global variables isn't the best way, but this is a very small project and I just want to get some logic on how I can alternate the colors of the chessboard. Your help is very much appreciated!

Answer 1

You could also try only incrementing your values by 1 (instead of boxWidth), which would make it simpler to check if they are even or odd. Then you would need to either scale or multiply by boxWidth and boxHeight:

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

var x, y,
  boxWidth = 30,
  boxHeight = 30;

var numbRows = Math.floor(canvas.width / boxWidth),
  numbCols = Math.floor(canvas.height / boxHeight);

ctx.save();
ctx.scale(boxWidth, boxHeight);
for (x = 0; x < numbRows; x++) {
  for (y = 0; y < numbCols; y++) {
    if ((x+y) % 2 == 0) ctx.fillStyle = 'white';
    else ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.rect(x, y, boxWidth, boxHeight);
    ctx.stroke();
    ctx.closePath();
  }
}
ctx.restore();