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();

Answer 2

Rendering with 3 lines of code

Here's a neat little trick you can use to draw a chess board:

var ctx = c.getContext("2d");

for(var x = 0; x < c.width; x += c.width / 4) ctx.fillRect(x, 0, c.width/8, c.height);
ctx.globalCompositeOperation = "xor";  // toggle alpha channel for every 2nd line
for(var y = 0; y < c.height; y += c.height / 4) ctx.fillRect(0, y, c.width, c.height/8);

<canvas id=c width=600 height=600></canvas>

We're using canvas' size to detemine the grid size. You can of course change this and offset to anything you like. You'd still use the divisors 4 (2 cells) and 8 (1 cell) with the actual width and height.

The first step draws vertical black stripes every other column. Then we toggle alpha channel for every other row knowing that the default color is black (rgba(0,0,0,0)) using the "xor" composite mode which toggles the alpha channel.

Just remember to start with a empty canvas (which you probably are anyways due to the need to redraw moves) and to set back composite mode to "source-over" after drawing the board.

If you'd like to change the color itself simply add an extra step at the end:

ctx.globalCompositeOperation = "source-atop";  // will draw on top of what is filled
ctx.fillStyle = "#09a";
ctx.fillRect(0, 0, c.width, c.height);

The fillStyle and fillRect() can be replaced or used with an image, pattern, gradient etc.

To fill the white background simply use composite mode "destination-over" (will draw behind anything filled using the alpha channel), then draw for background.

An alternative is to use a toggle switch when filling each cell one by one:

var ctx = c.getContext("2d");
var toggle = false;

ctx.beginPath();
for(var y=0; y < c.height; y += c.height / 8) {
  toggle = !toggle;   // toggle for each row so they don't line up
  for(var x=0; x < c.width; x += c.width / 8) {
    // toggle for each cell and check, only draw if toggle = true
    if (toggle = !toggle) ctx.rect(x, y, c.width / 8, c.height / 8);
  }
}
ctx.fill();  // remember to use beginPath() for consecutive draw ops

<canvas id=c width=600 height=600></canvas>

Access Logic

To know if you're inside a cell you would simply calculate the mouse position relative to the canvas (see this answer on how to do that) and then quantize (using pseudo variables here, replace with real):

var cellSize = boardWidth / 8;   // assumes the board is 1:1 square

var pos = getMousePos(event);    // see linked answer above
var cellX = Math.floor(pos.x / cellSize) * cellSize; // start of current cell X
var cellY = Math.floor(pos.y / cellSize) * cellSize; // start of current cell Y

(to get index of cell just drop the * cellSize part).

Example:

var ctx = c.getContext("2d"), x, y, w = c.width, h = c.height, cellSize = w / 8;
render();
ctx.lineWidth = 4; ctx.strokeStyle = "red"; ctx.setLineDash([7, 7]);

// non-optimized - in production only redraw when needed (cellX/Y changes)
c.onmousemove = function(e) {
  render();
  var cell = getCellPos(getMousePos(e));
  if (cell.x >= 0 && cell.x < w && cell.y >=0 && cell.y < h)
    ctx.strokeRect(cell.x + 2, cell.y + 2, cellSize - 4, cellSize - 4);
}

function getCellPos(pos) {
  return {x: Math.floor(pos.x / cellSize) * cellSize,
          y: Math.floor(pos.y / cellSize) * cellSize}
}
function getMousePos(e) {
  var rect = c.getBoundingClientRect();
  return {x: e.clientX-rect.x, y: e.clientY-rect.y}
}

function render() {
  ctx.clearRect(0, 0, w, h);
  for(x = 0; x < w; x += w>>2) ctx.fillRect(x, 0, cellSize, c.height);
  ctx.globalCompositeOperation = "xor";    // toggle alpha channel for every 2nd line
  for(y = 0; y < h; y += h>>2) ctx.fillRect(0, y, w, cellSize);
  ctx.globalCompositeOperation = "source-atop";       // fg
  ctx.fillStyle = "#3c4168";
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = "destination-over";  // bg
  ctx.fillStyle = "#eee";
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = "source-over";       // reset
}

body {background:#222;margin:20px 0 0 20px;}

<canvas id=c width=600 height=600></canvas>

Answer 3

Alternatives to the for loop

Another way without a loop, draw the pattern 2 by 2 square in top corner then repeat that by copying the canvas onto itself.

First create the top 2 by 2 square then fill rest of board with copies.

1. First 2 by 2 to 4 by 2
2. then 4 by 2 to 8 by 2
3. then 8 by 2 to 8 by 4
4. then 8 by 4 to 8 by 8

Example

const w= 100;
canvas.height = canvas.width = w * 8;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w + w, w + w);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, w);
ctx.fillRect(w, w, w, w);
ctx.drawImage(canvas, 0, 0, w * 2, w * 2, w * 2, y    , w * 2, w * 2);    
ctx.drawImage(canvas, 0, 0, w * 4, w * 2, w * 4, y    , w * 4, w * 2);
ctx.drawImage(canvas, 0, 0, w * 8, w * 2, 0    , w * 2, w * 8, w * 2);
ctx.drawImage(canvas, 0, 0, w * 8, w * 4, 0    , w * 4, w * 8, w * 4);

Thus it gets drawn in 7 render calls, if the grid was larger then 2 more calls for 16 by 16, and every doubling in size only needs two more calls.

The pattern can be very complex but not create excessive render stress as in the next example that has shadows and different composite calls.

const squareSize = 72;
const boardSize = 8;
const borderSize = 8;
canvas.height = canvas.width = squareSize * boardSize + borderSize * 2;
const ctx = canvas.getContext("2d");
var x = borderSize;
var y = x;
var w = squareSize;
drawSquare(3, 3, canvas.width - 6, "black", "#F97"); 
drawSquare(x, y, w, "white", "#964");
drawSquare(w + x, y, w, "black", "#745");  
ctx.drawImage(canvas, x, y, w, w, x + w, y + w, w, w);
ctx.drawImage(canvas, x + w, y, w, w, x, y + w, w, w); 
ctx.drawImage(canvas, x, y, w * 2, w * 2, x + w * 2, y, w * 2, w * 2);    
ctx.drawImage(canvas, x, y, w * 4, w * 2, x + w * 4, y, w * 4, w * 2);
ctx.drawImage(canvas, x, y, w * 8, w * 2, x, y + w * 2, w * 8, w * 2);
ctx.drawImage(canvas, x, y, w * 8, w * 4, x, y + w * 4, w * 8, w * 4);
drawSquare(0,0,canvas.width,"rgba(0,0,0,0.0)","rgba(0,0,0,0.05)");

// done.

// this function is only called twice.
function drawSquare(x,y,size,color,color2){
  ctx.save();
  ctx.shadowColor = color2;
  ctx.shadowBlur = size * 0.2;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
  ctx.beginPath();
  ctx.rect(x,y,size,size);
  ctx.clip();
  ctx.lineWidth = size;
  ctx.fillStyle = color;
  ctx.fillRect(x,y,size,size);
  ctx.globalAlpha = 0.5;
  ctx.strokeRect(x - size / 2,y - size / 2, size * 2, size * 2);
  ctx.shadowBlur = size * 0.5;
  ctx.strokeRect(x - size / 2,y - size / 2, size * 2, size * 2);
  ctx.shadowColor = "rgba(0,0,0,0)";
  ctx.shadowBlur = 0;
  ctx.globalAlpha = 1;
  ctx.strokeStyle = color2;
  ctx.lineWidth = 2;
  ctx.strokeRect(x+1,y+1,size -2,size-2);
  ctx.globalAlpha = 0.75;
  ctx.fillRect(x+1,y+1,size-2,size-2);
  ctx.globalCompositeOperation = "screen";
  ctx.fillStyle = "white";
  ctx.globalAlpha = 0.1;
  ctx.fillRect(x,y,4,size);
  ctx.fillRect(x,y,2,size);
  ctx.fillRect(x+4,y,size-4,4);
  ctx.fillRect(x+2,y,size-2,2);
  ctx.restore();
}

canvas { border : 2px solid black; }

<canvas id="canvas" ></canvas>

Use a pattern style.

Create an offscreen canvas to hold the pattern of the top 2 by 2, draw the pattern, then assign the fillStyle of the on screen canvas to a new pattern created from the off screen canvas and fill the whole canvas.

const w = 72;
const patCan = document.createElement("canvas");
patCan.height = patCan.width = w * 2;
var ctx = patCan.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w + w, w + w);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, w, w);
ctx.fillRect(w, w, w, w);
// setup display canvas
canvas.height = canvas.width = w * 8;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ctx.createPattern(patCan, "repeat");
ctx.fillRect(0, 0, w * 8, w * 8);

canvas { border : 8px solid green; }

<canvas id="canvas" ></canvas>

Answer 4

You can use fillRect to do so like this:

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.fillStyle = (x / boxWidth + y / boxHeight) % 2 === 0? "white": "black"; // determine which color to use depending on the index of x (x / boxWidth) an the index of y (y / boxHeight)
    ctx.fillRect(x, y, boxWidth, boxHeight);
  }
}

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

Answer 5

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);
    // fill odd boxes
    (x/boxWidth + y/boxHeight) % 2 && ctx.fill()
    ctx.stroke();
    ctx.closePath();
  }
}

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