[Dilettante_Pro]

<canvas id = 'canv'></canvas>
<script>
var canv = document.querySelector('#canv'),
        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 (j = 0; j < 3; j++) {
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.fillStyle = 'blue';
        ctx.arc(69.375 + 98.75 * ((j + 1) % 2) + i * 49.375, (69.375 + 98.75 * j), 35, 0, Math.PI * 2, true);
        ctx.fill();
    }
 }   

for (j = 0; j < 3; j++) {
   for (var i = 0; i < 16; i += 4) {
        ctx.beginPath();
        ctx.fillStyle = 'white';
        ctx.arc(69.375 + 98.75 * (j  % 2) + i * 49.375, (563.125 + 98.75* j), 35, 0, Math.PI * 2, true);
        ctx.fill();
    }
 }   
</script>

20 - это отсюда: ctx.strokeRect(20, 20, 790, 790);

69.375 = 20 + 98.75 / 2

ЗЫ: использовал fill, т.к. stroke бледновато выглядит