[drakulawz]

Всем доброго времени суток.
Увидел на хабре как циклом стирали квадраты и получилась шахматная доска. Всё вроди бы понятно, но появились некоторые вопросы, и, возможно, это даже не о канвасе, а скорее об циклах.
Буду очень благодарен если мне помогут разобраться в некоторых вопросах по рисованию разных фигур через циклы.
1. Что означает число 20 в этой и подобных строках:
ctx.clearRect(20 + i * 98.75, 20 + j * 98.75, 98.75, 98.75);
и как узнать какое число нужно ставить?
2. После долгой и мучительной расстановки шашек, методом тыка (подставлял разные вариации и наборы цифр в цикл))), я таки выставил их как надо (более-менее), но всё же: как убрать лишние рядки так как их вышло по четыре у каждой из сторон, а не 3, как надо?
3. Возможно ли как-то вставить moveTo(), что бы не было видно переходов между кругами? Я знаю, что если бы я использовал метод fill() то линий не было бы, но мне не нужно заполнение.

var canv = $('#canv')[0],
        ctx = canv.getContext('2d');
    canv.width = 900;
    canv.height = 900;
    ctx.strokeRect(15, 15, 800, 800);  // внешняя рамка доски;
    ctx.strokeRect(20, 20, 790, 790);  // внутренняя рамка;
    ctx.fillRect(20, 20, 790, 790);       // заливка доски;
    for (var i = 0; i < 8; i += 2)
        for (var j = 0; j < 8; j += 2) {
            // создание размметки шахматной доски;
            ctx.clearRect(20 + i * 98.75, 20 + j * 98.75, 98.75, 98.75);
            ctx.clearRect(20 + (i + 1) * 98.75, 20 + (j + 1) * 98.75, 98.75, 98.75);
        }

    for (var i = 0; i < 16; i += 4) {
        for (var j = 0; j < 6; j += 4) {
            // расстановка синих шашек;
            ctx.beginPath();
            ctx.strokeStyle = 'blue';
            ctx.arc(170 + i * 49.375, 70 + j * 49.375, 35, 0, Math.PI * 2, true);
            ctx.arc(-80 + (i + 3) * 49.375, 20 + (j + 3) * 49.375, 35, 0, Math.PI * 2, true);
            ctx.stroke();
        }
    }
    for (var q = 0; q < 16; q += 4) {
        for (var w = 0; w < 6; w += 4) {
            // расстановка белых шашек;
            ctx.beginPath();
            ctx.strokeStyle = 'white';
            ctx.arc(170 + q * 49.375, 470 + w * 49.375, 35, 0, Math.PI * 2, true);
            ctx.arc(20 + (q + 1) * 49.375, 370 + (w + 4) * 49.375, 35, 0, Math.PI * 2, true);
            ctx.stroke();
        }
    }

Если я правильно всё понял, то здесь нужно использовать по три цикла для каждого ряда шашек каждому из сторон, чтобы не было остаточных линий и было всего три ряда в место 4.
Надеюсь на помощь в разъяснении этих вопросов и подтверждении/опровержении моих домыслов.

Сделал как предполагал:

for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(170 + i * 49.375, 70, 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }
    
    for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(70 + i * 49.375, 170, 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }
    
    for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.arc(170 + i * 49.375, 265, 35, 0, Math.PI * 2, true);
        ctx.stroke();
    }

Но такой код великоват. Проще никак нельзя?