This article serves as an introduction to HTML 5. This version of HTML is not supported in all browsers. Even some browsers that claim to support HTML 5 do not support all the features available in this version of HTML. Although supporting some/all features of a language is not new to browsers overall, what is new about this is that HTML 5 itself is new, and some of its features are works in progress, especially when it comes to user security. This article is the first of two parts.
As far as the browsers are concerned, I am using Firefox 4.0 Beta 6 to test the examples illustrated in this article. The reason for this choice is that Firefox has better support for the HTML 5 features than other browsers (Opera does a good job at supporting HTML 5 as well). To write the HTML code you can use any text editor (I am using Notepad++).
So what is HTML 5 and what does it bring to the table? This new standard of HTML, XHTML, and the HTML DOM was a cooperative work between the W3C and WHATWG (Web Hypertext Application Technology Working Group). HTML 5 contains new features such as canvas, audio and video elements, new content specific elements (like article, header, footer, and section...), new form controls (calendar, date, time, email...), and better support for local offline storage. In the following sections, we will explore some of those elements in detail, using examples where appropriate.
HTML 5 Canvas
Now, let's see how we can draw on the canvas. To do so, we added a script tag, got the canvas by id, retrieved its context, and made the drawing. getContext("2d") is a built-in HTML 5 object that has methods to draw different shapes on the screen.
The output for the code above is as follows:
The canvas will look like the following screen shot:
Don't let these simple drawings fool you. The ability to draw inside the canvas is powerful. You are able to use canvas to transform to scale and translate. In the following example, we will see how to use the ability to draw some text (with a shadow) inside the canvas.
As usual, we get the canvas and its context. Then, we save the current context and restore it at the end so we do not affect upcoming drawings. We set some text and shadow properties, and then we call the method fillText(). Here is a snapshot of the code and the output: