36 lines
1019 B
JavaScript
36 lines
1019 B
JavaScript
var _canvas = document.getElementById('chessBoard');
|
|
|
|
function drawChessBoard(canvas) {
|
|
let ctx = canvas.getContext('2d');
|
|
|
|
let indexMargin = (canvas.width + canvas.height) / 2 / 16;
|
|
let w = canvas.width - indexMargin;
|
|
let h = canvas.height - indexMargin;
|
|
let bw = w / 8;
|
|
let bh = h / 8;
|
|
|
|
// Draw squares
|
|
ctx.fillStyle = '#c0c0c0';
|
|
for (let r = 0; r < 8; r++) {
|
|
for (let c = 0; c < 8; c++) {
|
|
if ((r + c) % 2) ctx.fillRect(bw*c+indexMargin, bh*r+indexMargin, bw, bh);
|
|
}
|
|
}
|
|
|
|
// Draw letters
|
|
let indexLetters = 'abcdefgh';
|
|
ctx.fillStyle = 'black';
|
|
let fontsize = indexMargin / 2;
|
|
ctx.font = fontsize.toString() + 'px Monospace';
|
|
for (let idx = 0; idx < 8; idx++) {
|
|
ctx.fillText(indexLetters[idx],
|
|
bw*idx + bw/2 + indexMargin - fontsize / 4,
|
|
indexMargin / 2);
|
|
ctx.fillText((8-idx).toString(),
|
|
indexMargin / 2 - fontsize / 4,
|
|
bh*idx + bh/2 + indexMargin + fontsize / 4);
|
|
}
|
|
}
|
|
|
|
drawChessBoard(_canvas);
|