HTML5 markup is still evolving

Lesson 12, HTML5 Essentials 261

You can interactively manipulate pixels onscreen, render text, and export these contents to

a static image fi le, such as a PNG fi le. With the addition of JavaScript and the new CSS3

animation features, you can also make the objects you create move, fade, scale, and so on.

Adding a canvas element is simple:

<canvas id="myCanvas"></canvas>

The work behind the scenes is performed by JavaScript, which provides a context for any

objects you create:

<script>

var canvas = document.getElementByI ("myCanvas"),

context = canvas.getContext("2d");

// x = 10, y = 20, width = 200, height = 100

context.fi llRect(10, 20, 200, 100);

</script>

This code creates a simple rectangle fi lled with the color black. This code might seem too

complicated for such a simple result, but for the fi rst time, HTML has its own drawing

format. The current drawback is that you must draw your objects using code similar to the

example above; there are no true equivalents to the drawing tools found in applications such

as Flash. However, this might change quickly with the advent of third-party plug-ins such

as Ai–>Canvas (available at http://visitmix.com/labs/ai2canvas/), which allow you to export

vector graphics created in Adobe Illustrator to the canvas element.

HTML5 markup is still evolving

HTML5 markup will take a long time to become part of your standard toolbox. Many

modern browsers currently support the new tags, but the fi nal specifi cation will not be

delivered for years (current estimates aim around the year 2022). This means that tags such

as <header> and <section> might change or be renamed. For the major elements, this is

unlikely to happen because all modern browsers support them today; you can use a number

of additional elements as long as you are careful.

Grouping headings and images

The