HTML and CSS Reference
In-Depth Information
Chapter 4
Using Canvas, SVG, and Web Fonts
We've already covered basic web standards, emerging browsers, and how advertising fits into the big conversation
called HTML5. Now it's time to dig a bit deeper into the technologies that drive HTML5, including the new
canvas
element, SVG and Web Font support. We'll kick things off by talking about one of the biggest advancements in
HTML5 specification first,
canvas
.
The
canvas
element is the new display API for dealing with graphics directly within the browser. If you're coming
from a Flash background working with the display list API,
canvas
will be a welcomed adjustment in making the
transition. This element can provide full animation, image manipulations, and obviously a drawing tool and do it
all from within the native browser environment, without the need of a plug-in like Flash. We'll dig a bit deeper into
providing use cases and examples for dealing with the
canvas
element as it relates to advertising as well as taking a
dive into the tools and API's, which can help Flash developers make the transition into using this for their creative
development. For the CSS side of things, we'll discuss how web fonts can provide rich font rendering directly within
the browser via normal CSS syntax. We'll also discuss Font Squirrel and how this and other tools can help convert
many font formats to browser-friendly formats. Finally, we'll review how scalable vector graphics (SVG) can be
interpreted by HTML5 markup within the browser and how for icons and symbols SVG provides many benefits over
traditional imagery. As a follow-up to the last chapter's discussion of images vs. icons, you'll get great insight into
optimizing graphics for any screen. In short, this chapter is chock full of useful tidbits, so be sure to pay attention and
follow along.
Canvas
The
canvas
element, used to render graphics in modern browsers, is arguably one of the biggest additions to HTML5's
specification. It's a particularly large inclusion to the spec with regard to advertising, since with it one can finally paint
graphics as rich as Flash did—but natively, directly inside the browser! Originally developed by Apple in 2004, the tag
“canvas” was used in the Mac OSX operating system's dashboard widgets and in its browser, Safari. Soon after, the
Web Hypertext Application Technology Working Group (WHATWG) added it to the HTML5 standard, and it was later
adopted by Firefox, Opera, Google and eventually Microsoft.
The
canvas
element brings many great things to a browser by rendering graphics, animation, and even
interactivity. There are many different ways of working with the
canvas
element; the following sections will dive a bit
deeper into working with it. Setting up the
canvas
element in your markup is really quite simple. It's a tag, just like any
other you'd use: <div>, <img>, <body>. Listing 4-1 outlines how to create the element.
Listing 4-1.
How to Create the Canvas Element
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
