HTML and CSS Reference
In-Depth Information
Advanced Canvas
From the brief examples above, you should now have a pretty good understanding of what the
canvas
element can
do and the many enhancements it brings to the HTML5 spec. The following are some of the more advanced
canvas
examples to check out on your own time.
•
•
•
•
•
•
•
When exploring new libraries and tutorials, keep in mind the file weight and overall performance, especially
when viewing demos and attempting to reference them for your ad creatives. Keep in mind, too, that no one is
going online to view your ad, so try to avoid overkill. It's often best to just give viewers a taste, one that will drive
them to a fuller experience on a landing page. An ad that's too elaborate can tax a user's machine or even crash it,
depending upon the device, the machine's limitations, even the publisher the ad is running on. Last, take a look at
html5rocks.com/en/tutorials/canvas/performance
for tips on maximizing your
canvas
performance on the Web,
including layering
canvas
elements for complex graphics and avoiding unnecessary stage changes.
Canvas Browser Support
Since the
canvas
element is an emerging feature of the HTML5 spec, many older browsers do not support it. Thus,
you'll need to use polyfills and shivs for browsers that can't support the new element, should you need to design for
them. For example, Flash can be a graceful failover for targeting desktops and display. To detect modern browser
support in desktop and mobile, use a library called Modernizr (
modernizr.com
). Modernizr is more or less geared
towards web content development where k-weight isn't a major issue. In online advertising, having your ad creative
include Modernizr can increase k-weight significantly. Find out if your publisher includes Modernizr and if it can
provide the proper “hooks” for the ad to tie into. If you can leverage it, Modernizr is sort of a Chinese restaurant
menu for feature detection; you only include what you absolutely need to check for—and that can save on the overall
k-weight. In an ideal world, publishers and ad networks would include this library by default so ads can hook into
useful features that site content is already checking for. Be sure to reach out to your publisher to find out whether its
page is using Modernizr and whether the ad creative can detect supported features. Listing 4-11 shows an example of
using Modernizr for
canvas,
without including the library.
Listing 4-11.
Using Modernizr for Canvas Detection
if (Modernizr.canvas) {
// canvas is supported—do canvas stuff
}else{
//canvas is not supported use Flash or something similar as a failback
}
As you see, an ad designer could use this very easily by simply including a conditional (if/else) statement, if a
publisher already includes it into their site.
