HTML5 Canvas Chess board

Html

<html lang="en">
<head>
<title>Canvas Chess board</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>

<body>
<canvas id="chess" width="800" height="800">
Chess board
</canvas>

<script src="script.js"></script>
</body>
</html>

Styles

#chess {
border: 1px solid;
display: block;
margin: 0 auto;
width: 800px;
height: 800px;
}

Js

Colors

let lightCellColor = '#ddb180';
let darkCellColor = '#7c330c';
window.onload = function () {
let canvas = document.getElementById('chess');
let context = canvas.getContext("2d");

let lightCellColor = '#ddb180';
let darkCellColor = '#7c330c';

context.strokeStyle = "black";
context.strokeRect(200, 200, 400, 400);

context.fillStyle = lightCellColor;
context.fillRect(200, 200, 50, 50);

context.fillStyle = darkCellColor;
context.fillRect(250, 200, 50, 50);
}
Chess board with two initial cells
let x = 200;
let y = 200;
let chessBoardWidth = 400;
let chessBoardHeight = 400;
let delta = chessBoardWidth / 8;
for (let i = 1; i <= 8; i++) {
for (let j = 1; j <= 8; j++) {
context.fillStyle = (i + j) % 2 == 0 ? lightCellColor : darkCellColor;
context.fillRect(
x + delta * (i - 1),
y + delta * (j - 1),
delta,
delta
);
}
}
Chess board
context.fillStyle = (i + j) % 2 == 0 ? lightCellColor : darkCellColor;
if ((i + j) % 2 == 0 ) {
context.fillStyle = lightCellColor;
} else {
context.fillStyle = darkCellColor
}
context.fillRect(
x + delta * (i - 1),
y + delta * (j - 1),
delta,
delta
);

Thank you for your attention.

Senior web developer, architect, cryptocurrencies trader, https://lytvynov-anton.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store