... шифровка из центра, изменить
ww!!!
Пример: canvas шашки
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<canvas id = 'canv'></canvas>
<script>
var canv = document.querySelector('#canv'),
ctx = canv.getContext('2d');
var ww = 387, k = 20, kk = k-5 , w = ww - k/2, v = w/8, vv = v/2, vd = vv + k, dr = vv-5;
canv.width = ww + k;
canv.height = ww + k;
ctx.strokeRect(kk, kk, ww, ww); // внешняя рамка доски;
ctx.strokeRect(k, k, w, w); // внутренняя рамка;
ctx.fillRect(k, k, w, w); // заливка доски;
for (var i = 0; i < 8; i += 2)
for (var j = 0; j < 8; j += 2) {
// создание размметки шахматной доски;
ctx.clearRect(k + i * v, k + j * v, v, v);
ctx.clearRect(k + (i + 1) * v, k + (j + 1) * v, v, v);
}
for (j = 0; j < 8; j++) {
if(j == 3 || j == 4) continue;
for (var i = 0; i < 16; i += 4) {
ctx.beginPath();
ctx.fillStyle = j > 4 ?'white' : 'blue';
ctx.arc(vd + v * ((j + 1) % 2) + i * vv, (vd + v * j), dr, 0, Math.PI * 2, true);
ctx.fill();
}
}
</script>
</body>
</html>