A Graphical Chessboard
The Code
<h1> A Graphical Chessboard</h1>
<canvas id="chessboard" width="400", height="400", style="border:1px solid #000000;"> </canvas>
<script type="text/javascript">
"use strict"
const SIZE = 8;
let canvas = document.getElementById("chessboard");
let ctx = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
let boardSize = Math.min(width, height);
let squareSize = boardSize/SIZE;
for(let row = 0; row < SIZE; row ++) {
for (let col = 0; col < SIZE; col ++) {
if ((row+col)%2 == 0) {
ctx.fillStyle = "red";
} else {
ctx.fillStyle = "black";
}
ctx.fillRect(col*squareSize, row*squareSize,squareSize, squareSize);
}
}
</script>