Description:

HTML5 is a hot topic these days, and browsers are starting to implement various features from the spec. While elements such as native audio and video support are still fraught with issues, one part of the spec that is fairly stable is the <canvas> element. Using <canvas>, one can create interactive graphics using nothing but some JavaScript and some elbow grease.

However, the <canvas> element is a raster element. Rasters make some people gag, and with good reason. For the vector lovers out there, we have Scalable Vector Graphics (SVG). SVG support in browsers has grown strong, and there is support in the spec and in browsers for scripting them, allowing us to do some pretty amazing vector works in dynamic, interactive ways as well.

If you haven’t guessed by now, this presentation will be fairly technical in nature. We’ll be getting elbow-deep in some JavaScript. Prior knowledge of JavaScript and the definitions of raster and vector graphics could be useful, but isn't required. We'll do a brief primer on those distinction, as well as how JavaScript works with the HTML document object model in these cases.

While being technical in nature, this discussion will also be somewhat on the edge of the technology — not quite bleeding-edge, but these areas of web development are still being explored. Along that line, we'll also briefly touch upon WebGL, which is a very new specification for doing full in-browser 3D graphics work without any plugins at all.

It's a brave new world for graphics on the 'net. Let's take a look together.