HTML5: Setting up the Canvas

Ok, we're going to go ahead and jump right in the HTML5 canvas element. It looks something like this:

  <canvas>
  </canvas>


This alone allows use for a canvas through the HTML5 tags in the DOM.

Adding a little more substance so we can see the canvas (default size is 300x150 if we don't add this):


  <canvas Id="MyCanvas" width="320" height="240">

Expanding on this...since the default canvas is white and your default web background is white, you'll want to add a border (can remove later if undesired):

  <canvas Id="MyCanvas" width="320" height="240" style="border:1px solid #000;">


'Id' is the most important feature here to pay attention to. The Id attribute does nothing and really is nothing. It is the name of the canvas, as you can contain multiple ones on the same document page, or within each other. This is to easily "id"entify them when called into play. This is real handy when differentiating between different canvas.


A quick insight about canvas layering


There is no layering method within the canvas, so one must create a canvas within another canvas to achieve layering effects. Stacking canvas on top of each other is the only native way. The layering process can be, for example, to have your game background/tiles as the most bottom layer, then you have your objects on the screen (players, NPCs) on the higher layered canvas, and then maybe some special effects (rain, laser beams, etc.) on the next one, and then lastly perhaps your game menus/windows that cover everything on top (or whatever layer order desired).


 <canvas id="layer1" width="100" height="100"
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100"
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>


I'll go into further detail about layering and placing canvas in each other some other time, as it could probably serve as it's own topic.


Something to note about programming HTML5


Now, before we go any further, we need to realise something about the HTML5 canvas. You are required to know JavaScript to use it (which isn't that hard to learn really). We thus, must somehow tell the web page we're going to enable using scripts. There are two ways to do this. Adding scripts internally within the HTML document (messy way), or externally call them (more modular). Now, I'm not going to teach you JavaScript, but I'll display both ways for argument's sake. If you don't know JavaScript though, you can easily learn it on the web like w3schools. For the sake of future tutorials concerning game physics and what not, I'll teach you some JavaScript related to these subjects, assuming you understand the basics.

Internal way:


  <script type="text/javascript">
    // insert JavaScript code here
  </script>


External way (typically in the <header> tag):


  <script type="text/javascript" src="YourJavaScriptFile.js"></script>


The canvas alone is, by default, blank and doesn't really do anything right now. JavaScript, more specifically, the DOM methods are used to actually start drawing things on the canvas like so (whether this is in an external .js file or a simple script tag):


  var canvas = document.getElementById("MyCanvas"); // this gets the Id you specified in the canvas element earlier
  var context = canvas.getContext("2d");            // this assigns a "2d" context to draw, you cannot change the value, "2d", to anything else (that I know of)


'getElementById("")' and 'getContext("")' are, again, DOM methods. You can read more about DOM methods here. This is important to understand, as they're predefined methods, not user made. Don't confuse these methods as your own JavaScript functions.

As I commented in the code next to the 'getElementId()' method, you're simply making the variable 'canvas' assign the value of the method, the Id "MyCanvas".

The context var is then being assigned the value of getContext() method within the your canvas object, "2d". This means that 2d image objects will be drawn to the canvas only. There are only two contexts, "2D" and "webgl".


"2d only? Then there must be a 3d value!"


Yes, this is called "webgl" as it's already been proven by some HTML5 games that 3d is definitely possible and not far from reality. The only thing left is to wait for the full support as it's rapidly changing in development. Of all things of that are "unofficial" in HTML5 is most likely the 3D canvas, as it will break your existing 3D canvas applications until HTML5 is fully supporting it. If you're wanting to get experimental now, that's fine, but don't start wailing because it broke on account of an internal change in the mark up language. I definitely don't recommend any moderately-large scale projects with this.