RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


A 3D Exploration of the HTML Canvas Element : Page 4

The HTML Canvas, an element of the upcoming HTML 5 specification, allows you to efficiently draw arbitrary graphics at the primitive or individual pixel level. Find out how to implement a 3D rendering using the HTML Canvas.

Capturing Screen Shots
One of the coolest aspects of the HC is that you can read and write the individual pixels of the rendered image. A great use of this is to capture a screen shot. The context.toDataURL() method returns a data URL containing the image encoded in .PNG format, which looks like this:

  data:image/png;base64,iVBORw0KGgoAAAANSUh[... much more data removed ...]

You can use this URL as any other. For example, you could open a new window with it and that window would show the image. In the 3D game, there's an extra rectangle below the view and map rectangles. Pressing Shift-S will take a screenshot and display it in this rectangle. From there, you can save the image, view it in its own window, or drag it to your desktop (if your operating system supports that).

HTML Canvas Bridges HTML and Pixels
Over the years, web designers and programmers have put a great deal of work into tricking HTML elements and CSS style declarations into doing unusual things—all in the name of pixel-accurate layout. It's always been hard to attain pixel-level accuracy, because HTML was meant to protect you from layout details. As you have learned from the examples in this article, the HTML Canvas enables you to bridge the gap between HTML markup and individual pixels.

Greg Travis is a Java programmer and technology writer, living in New York City. After spending three years in the world of high-end PC games, he joined EarthWeb, where he developed new technologies with the then-new Java programming language. Since 1997, he has been a consultant in a variety of Web technologies.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date