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.