HTML and CSS Reference
In-Depth Information
if (color === "black") {
img = images[event.target.result.blackImage];
}
else {
img = images[event.target.result.whiteImage];
}
chessContext.drawImage(img,
(75 - event.target.result.width) / 2 + (75 * column),
73 - event.target.result.height + (75 * row),
event.target.result.width,
event.target.result.height);
}
}
This code uses the same transaction object, which is passed in. It obtains the
pieceType
object store and
then calls its
get()
method. The
onsuccess
event handler gets the necessary properties and calls the canvas
drawImage()
method. Refer to Chapter 10 for more information about drawing images on a canvas.
Now add the call to
drawAllPieces()
in the
onsuccess
event handler for the
open()
call by adding the code
shown in bold:
request.onsuccess = function (event) {
db = event.target.result;
// Add the pieces to the board
resetBoard();
// Draw the pieces in their initial positions
drawAllPieces();
}
Testing the Application
Now you're ready to test the application, which will display the initial starting positions. Make sure that the debug
browser is set as Firefox and press F5 to start the application. You should see an alert letting you know that the
database is being configured as shown in Figure
11-3
.
Figure 11-3.
The alert showing the database is being configured
