HTML5 Canvas Checkered Pattern

Question

I am trying to create a retro pixelated background painting. The x and y position of "pixels" are odd and even accordingly. This seems to work for a resolution (res variable) of 4 and then the % operator does not seem to work.

function drawPixelatedBackground()
{
    var res = 5;

    for (var x=0; x<settings.width/res;x++ )
    { 
        for (var y=0;y<settings.height/res;y++)
        {
            if ( (x%2==0) && (y%2==0) )
            {
                nx = x * (settings.width/res);
                ny = y * (settings.width/res);
                ctx.fillStyle= settings.colors.Fill;
                ctx.fillRect(nx,ny, nx+  (settings.width/res),ny+   (settings.height/res) );
            }

        }
    }
}

Answer 1

Little issue with your logic. I'll explain mine below.

http://jsfiddle.net/2eee9moq/2/

function drawCheckeredBackground(can, nRow, nCol) {
    var ctx = can.getContext("2d");
    var w = can.width;
    var h = can.height;

    nRow = nRow || 8;    // default number of rows
    nCol = nCol || 8;    // default number of columns

    w /= nCol;            // width of a block
    h /= nRow;            // height of a block

    for (var i = 0; i < nRow; ++i) {
        for (var j = 0, col = nCol / 2; j < col; ++j) {
            ctx.rect(2 * j * w + (i % 2 ? 0 : w), i * h, w, h);
        }
    }

    ctx.fill();
}

var canvas = document.getElementById("canvas");

drawCheckeredBackground(canvas);

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

• The nested for loop draws the blocks in one row.
  • 2 * j * w + (i % 2 ? 0 : w) is shifting the x co-ordinate of each block every other row.

Answer 2

Loop through the rows and columns like so:

for (let column = 0; column < board.columns; column++) {
  for (let row = 0; row < board.rows; row++) {

  }
}

and create the checkered pattern by drawing a rectangle if either of the following conditions is true:

• row is even and the column is odd
• row is odd and the column is even

In code:

if (row % 2 === 0 && column % 2 === 1 || row % 2 === 1 && column % 2 === 0) {
  canvas.context.rect(
    column * column_width,
    row * row_height,
    column_width,
    row_height
  );
}

const canvas = {
  element: document.querySelector("canvas"),
  context: document.querySelector("canvas").getContext('2d')
}

const board = {
  rows: 15,
  columns: 17,
  colors: {
    light: '#a3cf53',
    dark: '#abd55a'
  }
}

canvas.context.beginPath();
canvas.context.fillStyle = board.colors.dark;
canvas.context.rect(0, 0, canvas.element.width, canvas.element.height);
canvas.context.fill();

canvas.context.beginPath();
canvas.context.fillStyle = board.colors.light;
for (let column = 0; column < board.columns; column++) {
  for (let row = 0; row < board.rows; row++) {
    if (row % 2 === 0 && column % 2 === 1 || row % 2 === 1 && column % 2 === 0) {
      canvas.context.rect(
        column * canvas.element.width / board.columns,
        row * canvas.element.height / board.rows,
        canvas.element.width / board.columns,
        canvas.element.height / board.rows
      );
    }
  }
}
canvas.context.fill();

body {
  margin: 0;
}

<canvas width="595" height="525"></canvas>