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.
Previous Page
