HTML and CSS Reference
In-Depth Information
chessContext.clearRect(0, 0, 600, 600);
chessContext.fillStyle = "red";
chessContext.strokeStyle = "red";
// Draw the alternating squares
for (var x = 0; x < 8; x++) {
for (var y = 0; y < 8; y++) {
if ((x + y) % 2) {
chessContext.fillRect(75 * x, 75 * y, 75, 75);
}
}
}
// Add a border around the entire board
chessContext.strokeRect(0, 0, 600, 600);
}
</script>
3.
save your changes and press F5 to start the application. The page should look like
Figure
10-2
.
Figure 10-2.
The initial chess board
The
drawBoard()
function first clears the area on which it will be drawing. It then uses nested for loops to
draw the squares. Notice that it only draws the red squares. Since the entire area was cleared first, any area not
drawn on will be white. This code uses nested for loops to iterate through the eight rows and eight columns. The
red squares are the ones where the sum of row and column is odd. For even numbered rows (0, 2, 4, and 6) the
odd columns (1, 3, 5, and 7) will be red. For odd-numbered rows, the even-numbered columns will be red.
To clean-up the edge squares, a red border is drawn around the entire board.
