Checkered Pattern

HTML

<canvas id="c" width="400px" height="400px" style="border: 1px solid black"></canvas>

JavaScript

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

for (x = 0; x < 8; x++) {
    for (y = 0; y < 8; y++) {
        ctx.fillStyle = "rgba(255, 255, 255, 0.5)|rgba(0,0,0,0.3)".split('|')[(x + y) % 2];
        ctx.fillRect(x * 50, y * 50, 50, 50);
    }
}