Creating a Canvas
While writing the sprite tutorials I realized that I probably needed to write one about how to set up the canvas to begin with. The first thing you must do is open up a text editor (like notepad) and save the file with a “.html” extension. To do this change the Save as Type: drop down to “All Files”. save the file in the same folder with the apricot.js file.
Alright, now lets get down to the HTML. Start the file with the <html> tag and head and body section.
<html>
<head>
</head>
<body>
</body>
</html>
Now we need to include the apricot framework, do this with a script tag between <head> and </head>.
<script language=”JavaScript” SRC=”apricot.js”></script>
Now we need to create the canvas we are going to play the game on. This is done with the canvas tag in the body section. Make sure to give your canvas an id so apricot can figure out what to draw to. If you include text in between the two canvas tags it will only display that text if the user’s browser does not support the canvas element.
<canvas id=”canID”>your browser is too lame for canvas!</canvas>
Now that we have a canvas we need to initialize it with a wee bit of javascript code. In the head section, right after the script tag write out another script tag that looks like this:
<script type=”text/javascript”>
//initializes apricot.js
window.onload = gameStart;
function gameStart(){
apricotInit(“can”, 300, 300);
}
</script>
The apricotInit() function requires you to type in the canvas id (in quotes) and the desired width and height of the canvas(the 300s). The other part of the code just makes sure that the canvas has already been created before you call the initialization script. There you go! You are ready to start game programming! If you open the html file in your web browser you will not see anything, but all of the groundwork has been laid. To actually draw things to the screen check out the sprite tutorials.
