• Choose a category
• All
• Classic-Fiction

Canvas Demo

width = “300”

height = “200”>

This example requires HTML 5 canvas support

onclick = “draw()”>

click me to see a drawing

There’s quite a bit going on in this program. The image doesn’t come from the server as most Web images do; it’s drawn on demand by a small JavaScript program.

♦ Create an HTML page with a tag: Of course, you need the tag in your document; the element designates a part of the page that displays a graphic. The image of a canvas element is not pulled from an external file but created with JavaScript code.

♦ Extract a drawing context from the canvas: It’s only possible to do 2D graphics with a tag, but 3D canvases are expected in the future.

♦ Use special drawing commands to modify the context: The canvas mechanism supports a number of special JavaScript commands that allow you to draw and manipulate shapes directly on the surface. This example draws a number of circles in different colors to create an interesting pattern.

Although the tag may not be that interesting, it’s one of the most important features of HTML 5 because it changes the way programmers think about Web development. Because the client program draws the image, the image can be modified in real time and interact with the user. Here are some examples:

♦ Dynamic graphs: A Web page describing data can have graphs that automatically change when the underlying data changes.

♦ Custom components: A programmer can create entire new widgets to replace the ordinary buttons and list boxes. This will likely lead to Web-based user interfaces as rich as those now on the desktop.

♦ Gaming and animation: Until now, online gaming has required third-party applications (such as Flash or Java). The tag promises full graphics capability directly in the browser. Enterprising programmers have already written some very interesting games using the tag.

♦ An entire operating system: It’s possible that high-powered Web browsers with very fast JavaScript engines will be able to recreate much of an entire operating system using the tag as a graphical interface. A number of interesting devices are already using Web-based tools as the foundation of the GUI. It’s probably not a coincidence that the new browser and the new operating system by Google have the exact same name (Chrome).

The tag will likely have a profound effect on Web development, but it isn’t heavily used yet. One major browser (guess which one) has decided not to implement the tag. (Okay, I’ll tell you. It’s Internet Explorer.) Canvas is so important to the Web that Google has built a canvas plugin so canvas-based apps will work in IE.

Other Promising Features

HTML 5 offers some other very interesting capabilities. Most of the advanced tools won’t be used by beginning Web developers, but they’ll add very interesting new capabilities to the Web if they are adopted universally.

♦ Geolocation: If a device has GPS or Wi-Fi triangulation hardware built in (as many high-end cellphones, PDAs, and smartphones do), the geolocation tool will allow the programmer to determine the current position of the browser. This will have interesting consequences, as a search for gas stations can be automatically limited to gas stations within a certain radius of the current position (as one example).

♦ Local storage: Developers are working to build complete applications (replacements for word processors, spreadsheets, and other common tools) that are based on the Web browser. Of course, this won’t work when the computer is not online. HTML 5 will have mechanisms for automatically storing data locally when the machine is not online, and synchronizing it when possible.

♦ Drag-and-drop: Currently, you can implement a form of drag and drop inside the Web browser (see Book VII, Chapter 4 for an example). The next step is to allow users