Embedding Media - HTML5 with CSS3 - page 167

Optional Attributes
 src : The URL of the external resource to embed.
 type : The content type of the embedded resource (also called a MIME type). This attribute's
value should match the resource's actual content type; a content type mismatch may cause the
browser invoke the wrong plug-in to handle the content, and the content may not work.
 width : The width of the embedded content in pixels.
 height : The height of the embedded content in pixels.

Any other attribute that doesn't have a namespace and isn't one of name , align , hspace , or
vspace (these four are obsolete attributes, and are specifically excluded from embed because
they have effects beyond passing parameters to the plug-in).



Dynamic Drawings
One of the most exciting innovations in HTML5 is the canvas element and its associated scripting APIs,
allowing a browser—with the aid of JavaScript—to natively render imagery in real-time without requiring
additional plug-ins. The technology was first introduced by Apple and incorporated into WebKit, the
rendering engine that powers both Safari and Chrome. The canvas element was soon adopted by Firefox
and Opera, and finally by Internet Explorer as of version 9.

Images are static media—the picture lives on the server in a permanent, unchanging state, and users can
download the image to view it in their browsers. It's certainly possible to generate static images
programmatically, but once the file is made it remains forever static. Scalable Vector Graphics (SVG) is an
image format based on XML, and SVG imagery can be rendered dynamically, but for various reasons SVG
wasn't embraced as quickly or as widely as canvas has been. Although SVG offers many of the same
capabilities as canvas (and even a few advantages), the current generation of browsers has better support
for the canvas element.

canvas
The canvas element creates an empty drawing area for dynamically generated imagery—a metaphorical
blank canvas. The markup is incredibly simple:
<canvas></canvas>
That's it. On a rendered page, the canvas element designates a box 300 pixels wide by 150 pixels high by
default, but you can supply your own dimensions with the optional width and height attributes, or with
CSS. You may also want to include an ID attribute, to make it easier to target the element with JavaScript:
<canvas id="myCanvas" width="460" height="300"></canvas>

This is a new element in HTML5 so older browsers won't recognize it, and only the latest browsers support
the JavaScript methods for creating canvas drawings. The canvas element requires an end tag and, like
the audio and video elements, it can contain any other flow elements and content. Browsers that don't