Using Canvas, SVG, and Web Fonts - HTML5 Advertising - page 75

You may be asking, what about older browsers, like Microsoft's IE6 through IE8? Well, they can benefit from
leveraging ExplorerCanvas ( excanvas.sourceforge.net ), which is a polyfill for working with browsers that do not
support the new element. The canvas element can also be used in a bunch of different ways. Stacking multiple
elements on top of each other to form a final composite is one way, and it avoids canvas state changes. Painting on
the canvas is an expensive operation, since some browser's handle all of its processing power on the machine's CPU.
However, as versions of modern browsers, like Chrome version 18+, provide hardware-accelerated GPU support for
the canvas element, performance and rendering will speed up enormously. As more browsers adopt these features,
they will be exceptionally helpful in deploying to mobile devices, where taxing the CPU can eat up a battery's life and
ultimately crash browsers. (A very good write-up on canvas performance is found at html5rocks.com/en/tutorials/
canvas/performance .)

Animated Gifs
Have you ever heard the saying, “Just because you can do something one way doesn't necessarily mean it's the best
way to do it”? One often-overlooked component in browser animation is the good old animated gif format. Yes, I
know, it's a slightly mature and primitive method for creating animation on the Web, but it still holds some appeal
today. As you may remember, animated gifs were pretty big back in the days before Flash advertising. Remember from
Chapter 1 the static HTML or HTML ads that animated by means of a simple gif image? Animated gifs can be useful
in a pinch for animating a sequence of images quickly or if you just don't know much about working on the canvas
(though, that shouldn't be an issue any longer!). It's also a great workaround for translating frames of a video into an
image sequence so developers can simulate autoplay on iPhones and iPads and similar devices (Apple prohibits the
autoplaying of video as it eats up a customer's data plans). Also, animated gifs are accepted everywhere, on pretty
much every browser. Software like Adobe's Photoshop and Adobe Fireworks can create animated gifs very easily with
only a little work. Some online web services are even easier:

gifninja.com • Gifninja:

mothereffinganimatedgif.com
You'll find that not everything needs the canvas element for every type of animation, especially since it's an
emerging feature. Animated gifs are still a useful and viable feature to leverage; so take advantage of them for their
ease of use in creating and their overall file size when rendered. However, if you're looking to wow your client with
richer animations, you'd best explore with the canvas element. I suggest getting an understanding of the campaign's
goals and requirements from the publisher or ad network before you commit to one feature or another. Who knows,
you may be able to easily leverage both by developing with canvas in mind first and gracefully degrading to an
animated gif experience on users' browsers that can't support the HTML5 experience. Work with your first- and
third-party ad server to provide user agent detection and serve the creative and tags appropriately. To take advantage
of an animated gif failover for the canvas element, wrap the animated gif image in the canvas tag; for example,
<canvas><img src='animated.gif'/></canvas> . For browsers that support canvas , the inside element (in this case
the img tag) will be omitted; otherwise, for browsers that do not support canvas , the tag is recognized, and the image
will render to the screen.

• Mothereffing animated gif:

Canvas in Advertising
So great, you've learned all the amazing features and enhancements available to designers and developers who
operate with the new canvas element, but how does everything play out in the advertising space? Well, the canvas
element brings many new enhancements for advertising. For starters, for the first time one can create Flash-like