HTML and CSS Reference
In-Depth Information
<canvas id = "board" width = "600" height = "600">
Not supported
</canvas>
8.
In the Solution Explorer, right-click the Chapter11 project and select the
Add ➤ New Folder links. Enter Images for the folder name.
9.
The images for the chess pieces are included in the source code download file.
These are the same images used in Chapter 10. You'll find these in the Chapter10\
Images folder. drag all 12 files to the Images folder in the Solution Explorer.
Creating the Canvas
Now you'll design the canvas element using JavaScript. The initial design will just draw an empty board and you'll
add the chess pieces later. Refer back to Chapter 10 for more explanation about working with a
canvas
element.
Add a
script
element after the
div
element but inside the
body
element using the code from Listing 11-1.
Listing 11-1.
Designing the initial canvas
<script>
// Get the canvas context
var chessCanvas = document.getElementById("board");
var chessContext = chessCanvas.getContext("2d");
drawBoard();
function drawBoard() {
chessContext.clearRect(0, 0, 600, 600);
var gradient = chessContext.createLinearGradient(0, 600, 600, 0);
gradient.addColorStop(0, "#D50005");
gradient.addColorStop(0.5, "#E27883");
gradient.addColorStop(1, "#FFDDDD");
chessContext.fillStyle = gradient;
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>
Select Firefox for the debug browser. Press F5 to start the application, which should look like Figure
11-2
.
