HTML and CSS Reference
In-Depth Information
• WebSockets
• Document Editing
• Web Storage
• Offline Web Applications
We cover all of these topics in great detail throughout the topic, with full working examples
that often integrate multiple APIs at once. In this chapter, you'll get a glimpse of what's to
come, starting with the new
<canvas>
element and its associated API.
1.3.1. Canvas
HTML5 provides numerous elements that allow you to present information on a web page.
You can style these in many different ways, and you can use JavaScript to animate them
and apply dynamic effects. If you're comfortable with complex JavaScript code (and ex-
pect your users to be running high-performance browsers), you can do amazing things with
HTML and JavaScript.
The problem is, designers and developers have many things they may want to implement
that HTML doesn't cater to. What if you want to insert a circle, square, or other shape?
What if you want to display an image and dynamically alter it based on user selections, on
the fly? You could use static images or a server-side solution, but these aren't optimal. The
only viable solution had been to use a third-party plug-in such as Adobe Flash.
HTML5 introduces the
<canvas>
element and a series of related drawing APIs that will
allow you to do amazing things, without requiring the user to install a plug-in. The
<can-
vas>
element's name describes this new feature well: it's a canvas for your web pages.
Figure 1.7
depicts a game, “Canvas Break,” which we created entirely in HTML5 and
JavaScript, with the game's visuals output on a
<canvas>
element. Neat, huh? You'll
