The Canvas Element

The element is a new container for graphics. Note that the canvas is merely that, an area where graphics can be placed. The element should contain only two attributes: width and height. Here’s an example:

The actual drawing for this example is done in JavaScript. The key to implementing the graphics in your script is to reference a context through the method getContext. For now the only context you can call is “2d”. Think of the 2d context as your actual drawing plane (defined by the HTML canvas size) beginning at coordinates 0,0 (the very top left of the screen). To draw an item, you first decide at what coordinates the item will begin. For example, if you want to draw something that’s ten pixels in from the left and ten pixels in from the top, your coordinates are (10,10).

There are a number of ways to use the 2d context to create graphics. Everything from simple rectangles to curves and gradients are supported. For our purposes, we’ll keep it simple just to get you started. Here’s the JavaScript, implementing the principles outlined above:

If you’re using a supported browser (Safari, Firefox, or Opera) you should see the following result when you combine the HTML and JavaScript we just looked at.

screenshot

Again, before you do any drawing remember to implement the 2d context or you won’t see any graphics at all! Just in case you’re wondering what the heck this “fillRect” rubbish is about, here’s a quick explanation of the syntax for a few of the drawing methods.

Drawing Rectangles

First of all, you should know that when you see four numbers in the format (0,0,0,0), this represents (distance from the left, distance from the top, width, height). Now let’s look at a few specific syntax examples:
fillStyle = “rgb(50, 50, 50); Determines the color of the fill
fillRect (20, 20, 150, 150); Creates a simple filled rectangle
strokeRect (20, 20, 150, 150); Creates a stroked rectangle
clearRect (20, 20, 150, 150); Creates a transparent area (a hole)

Drawing Shapes

beginPath (); Starts a path
closePath (); Closes a path
moveTo (20, 20,); Lifts drawing pen and starts in a new location
fill (); Fills the drawn shape
stroke (20, 20); Strokes the drawn shape

Much More!

For much more information on how to draw with JavaScript and how to use the canvas element, check out Mozilla’s tutorial.
Also, here’s a handy Canvas Cheat Sheet from Jacob Seidelin.

The Article Element

The article element is simply a way to refer to a blog post, news article, etc. within your page. Here’s the syntax:

As you can imagine, this will make it super easy to target and style articles in your CSS without defining a class.

The Audio and Video Elements

Like the article element, these are simply containers that hold content. Again you can see the benefit immediately when you start to style these with CSS without the need of any custom classes. Here’s the simple syntax for each (any text placed between the brackets only shows up in unsupported browsers):

Audio Attributes

Both the audio and video elements contain important attributes that you should know. First let’s look at those for the audio element (source: w3shcools).

Video Attributes

The video element contains all the same attributes as the audio element as well as 3 more (source: w3shcools).

The Meter Element

The meter element can be used to contain measurements of any kind (percentage, score, day counter, etc.). This time, before we look at an example, let’s go straight into the attributes (again, straight from w3shcools).

The two specially important attributes in this set are max and min. The meter element can only be used when the measurement has a known maximum and minimum value. That doesn’t necessarily mean you have to define a max and a min (you could use the default), just that you have to be aware of what they are. Here’s an example:

Notice that for the first meter element required specification of the min and max because the range was between 0 and 50. However, the second meter used the default range of 1-100 because percentages usually fall in this range.

The Mark Element

The final element we’ll take a look at is . Simple in concept, the mark element can be used to highlight a specific section of text to make it more noticeable to the reader. Here’s an example:

Now we can use the mark tag to easily target the section we want to highlight in our CSS:

The result is nice, highlighted text that you can spot in an instant.

Conclusion

In summary, we covered six brand new elements from HTML5. First we looked at the canvas element, which is a container for a wide variety of graphical items that you can create using a number of JavaScript functions. Then we learned about the article element, which represents a new way to refer to external content. Next we outlined how to use the audio and video tags along with their various attributes as well as how to properly tag values falling within a specified range using the meter element. Finally, we discovered how to highlight a specific portion of text using the mark element.

I hope you’ve learned as much reading this as I did writing it! Use the comments below to ask any questions you might have or share your own bit of HTML5 knowledge. The next article in this series is perhaps the most important because we’ll be looking at a few more new elements that represent some serious semantic changes in the structure of HTML files. So check back soon to see how you’ll be laying out your HTML for years to come!