ichimatsu_canvas.js

var $ = function (id) { return document.getElementById(id); };

var makeDraw = function (draw) {
  return function (ev) {
    var canvas = $('ichimatsu');
    if (canvas.getContext) {
      draw(canvas.getContext('2d'));
    } else {
      alert('canvas not supported');
    }
  }
};

var ichimatsu = function (c) {
  var i, j;
  const padx = 5, pady = 5;
  const xn = 20, yn = 20;
  const width = 10, height = 10;

  for (i = 0; i < xn; i++) {
    for (j = 0; j < yn; j++) {
      if (!((j & 1) ^ (i & 1))) {
	c.fillRect(i * width + padx, j * height + pady, width, height);
      }
    }
  }

  c.strokeRect(padx + 0.5, pady + 0.5, xn * width - 1, yn * height - 1);
};

window.addEventListener("load", makeDraw(ichimatsu), false);