HTML5 in the browser: Canvas, video, audio, and graphics

Previous 1 2 Page 2

Another potential extension has also been adopted by some browsers. After creating the rendering engines that produce infinitely crisp images with endless precision, some SVG users took a step back and decided the images might be nicer if they could be a bit blurrier. (Some people are never happy.) In any case, Chrome, Opera, and Firefox offer SVG filters that average all nearby pixels to produce smoother, prettier, often bizarre effects that aren't as cold or as crisp as line drawings.

My quick SVG test offers an easy way to check your browser's ability to host both embedded and framed SVG tags. A good collection of SVG examples and tests collected by Andre M. Winter shows many of the ways that people are experimenting with the basic SVG standard, as well as several of the proposed additions and extensions.

Native SVG support in current and future browsers

~

 

WebGL: 3D Canvas

The WebGL format helps bring all of the power of OpenGL to the Canvas. Many of the development versions of the major browsers already support it, but they don't turn this on at the start. You need to activate it yourself by twiddling some of the configuration files. Chrome, for instance, asks you to start the browser from the command line and include the parameter --enable-webgl. Firefox lets you turn WebGL on from the about:config page (type "about:config" into the address bar).

The technology is not officially part of the HTML5 standard, but many people mention it in the same context because it is both experimental and tied to the Canvas object. The performance, of course, depends heavily on your video card and the memory available. Users with powerful graphics hardware report running an open source port of Quake 2 at 20 to 30 frames per second.

Andor Salga offers a collection of WebGL routines that test most corners of the spec.

More HTML5 goodness

The next several articles will dig deeper into the various enhancements to the HTML5 standard, many of which are hidden from view. While the <video> tags are hard to miss, the HTML5 standard also includes a number of ways that a website can begin to act like locally installed software. The second article will focus on local data storage, a set of features that lets a website stash information on the local disk and even access it when there's no Internet connection. The third in the series will dig into the newer ways that the new Web apps can communicate when there is a connection. Finally, the fourth piece will summarize a number of new features, such as geolocation, that don't fall into an easy pile.

All of these sets of new HTML5 features will radically expand the abilities of Web applications to be more than just a pile of links.

This story, "HTML5 in the browser: Canvas, video, audio, and graphics," was originally published at InfoWorld.com. Follow the latest news in software development, languages and standards, and HTML at InfoWorld.com.