Заполнить нечетные даже реагировать на холст

Question

Как заполнить сетку чередующимися цветами, нечетными ячейками с одним цветом и даже клетками другого цвета.

В настоящее время я создаю сетку, используя этот код:

var ctx = canvas.getContext('2d'), 
    columns = 6, 
    rows = 4, 
    w, h, tileWidth, tileHeight; 
    console.log(canvas); 

canvas.onresize = calcSize; 
canvas.onmousemove = highlight; 

Вот код, в настоящее время только при наведении мыши активирует цвета фона.

JSFIDDLE

Answer 1

Предполагая, что вы хотите, шахматная доска, как стиль (четное/нечетное), вы можете сделать что-то вроде этого:

for (var i = 0; i < rows; i++) { 
    for (var u = 0; u < columns; u++) { 
     ctx.fillStyle = (i + u) % 2 == 0 ? '#eee' : '#aaa'; 
     ctx.fillRect(u * tileWidth, i * tileHeight, tileWidth, tileHeight); 
    } 
} 

Вот обновленный fiddle. ^{(с некоторыми дополнительными исправлениями)}