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.

Introducing the HTML5 Canvas

A lot of those are wondering "What is HTML5?" and "What is it used for?" Now, not being a web design expert, I cannot answer these questions to the full of their extent (you can visit w3schools and about it on google for a clearer answer. However, as a reader, you aren't obligated to read what I say here is verbatim, and I implore you to explore a bit beyond the scope of my writing. What I'm here to do is introduce you to my exploration to what HTML5 canvas can do, mostly concerning games. The canvas element is an amazing addition to HTML5 and it makes games possible to develop without the necessity of using Adobe's Flash.

"Why are you writing this?"

I'm writing this article and a series to come to not only share what HTML5 is and can do, but also to write a decent tutorial and hopefully have some programmers critique me on what HTML5 can also do. If I'm wrong on a subject, I do ask you to comment, as I will correct it in my posts. You can add other information to my tutorials if you wish as well by leaving a comment. I hope to make this a great learning experience for myself and the reader.

"HTML5 canvas vs. Adobe Flash. Why do this?"

As we all know, Flash has dominated the web with its amazing software capabilities, to make the web more versatile, interesting, and dynamic. There are numerous reasons why the birth of HTML5 canvas's is a great achievement and good news for the web as opposed to the long existence of Flash's proprietary software.

For starters, Flash is not free. HTML5 and its canvas element, in conjunction with JavaScript, is. I am uncertain of the cost to purchase the software itself, but from when I was in high school toying with it, I remember going to the site and seeing it being charged for a hefty price to develop with. Therefore, it is not a real web standard (as it's not "free" as other web dynamics), nor is it seamless as you have to download the plug-in to display its content (I'm not arguing the simplicity of the issue though). With HTML5 canvas, the need to download a plugin for dynamic behavior is moot and tossed away for the better of web standards. There is no charge for use of the markup, nor there will there ever be. It was designed by the World Wide Web Consortium (w3c), the people who made HTML, CSS, XHTML, the web standards, and collaborating with Web Hypertext Application Technology Working Group (WHATWG) to create what we know as today, HTML5. HTML5 also includes the creation of videos and audio streams, much like how Flash displays videos on YouTube, with the video and audio tags, providing the ease to conform to web standards without using Flash.

Please note, HTML5 is not complete. It however, is quite functional as of today. The official release to when it will be is only speculated, however, it is being highly adopted by major browsers like Firefox, Chrome, Safari, Opera, and even now Internet Explorer (9 in particular...not that I would use it over Firefox, Chrome, or Opera). Also note that this means its functionality is still growing, and that the canvas element may just be the icing on the cake as far as capabilities goes more towards the future. One example I can think of is the 3D support through the canvas instead of just 2D. While I'm unaware of any current official 3D HTML5 canvas support natively, there are browsers like Firefox who are making it their obligation to go to the extent of expanding on this idea and making it possible. However, this can be problematic, as it's (correct me if I'm wrong) browser support is only of that browser, making it not really a standard.

"HTML5 is the new flash?"

Actually, HTML5 canvas (along with a couple other elements such as video/audio) in conjunction with JavaScript (something that is also free) is the new Flash. Though making bold statements like this isn't bold enough, as it's a real web standard, eventually leaving Flash in the dust in the future. Flash definitely has competition on its hands, and what bigger competition than the people who make the web standards? Granted, Flash will be here for years to come, but it's development use will be eventually divided as HTML5 becomes a web standard, making one less reason to exist.

However, my point in introducing this concept is I would like to illustrate what HTML5 canvas can do concerning 2d games. I will be exploring this and I want to share it with you as a reader what I learn from it, and what you could possibly learn too. Though, again, don't hold everything I say as "the golden truth". I am not a professional web developer, but a curious one who likes to dabble with this type of stuff.

Where this is heading

In my upcoming posts (as I'm making a series out of this), I will be showing you how to use HTML5 canvas (easier than you may think) fundamentals such as drawing basic shapes and my adventure with it, as I plan on taking you on a single player gaming platform journey. So this means that the scope within the series will mostly be about canvas fundamentals and possible game development environments using JavaScript. Concerning game development, it will be mostly about single player games that can be comparable to Flash games, so don't expect an MMO. MMO featuring may come later down the line through this series, however, I don't think it will be any time soon. This is just mere experimentations to demonstrate HTML5's capabilities.

Well enough of an introduction...I promise the series won't be hefty in verbiage like this, but more "hands on". Our first adventure in the series will be "creating a simple canvas", a little about it, and enabling basic use of it. Stay tuned.