Ok, we're going to go ahead and jump right in the HTML5 canvas element. It looks something like this:
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
External way (typically in the <header> 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)
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.