With the recent release of the
latest IE9 platform preview, we talked about how we’re rebuilding the browser to use the power of your whole PC to browse the web, and to unlock a new class of HTML5 applications. One area that
developers are especially excited about is the potential of HTML5 canvas. Like all of the graphics in IE9, canvas is hardware accelerated through Windows and the GPU. In this blog post we discuss some of the details behind canvas and the kinds of things developers can build.
Canvas enables everything from basic shapes to fully interactive graphics
Canvas is a way to program graphics on the web. The tag is an
immediate mode 2d drawing surface that web developers can use to deliver things like real time graphs, animations or interactive games without requiring any extra downloads.
At the most basic level, canvas enables you to draw primitives like
lines,
rectangles,
arcs,
Bezier curves,
quadratic curves,
images and
video like the following:
This image is a simulation of what you'd see in a canvas enabled browser.
Please use the
IE9 preview to see these examples running in canvas.
The
Canvas Pad demo on
the IE test drive site goes into detail on the canvas syntax and enables you to easily experiment with a wide range of examples. Feel free to make changes to any of the samples that are there to see how it works -- for example, try changing colors or sizes of things.
Taking things a step further, you can use JavaScript to animate canvas drawings or make interactive experiences. The next example
draws lines as you move your mouse (or as you move your finger on touch enabled devices) over the black box. You could also choose to have your canvas experience react to keyboard input, mouse clicks or
any browser event.
This image is a simulation of what you'd see in a canvas enabled browser.
With canvas support in IE9, you can move your mouse over the black box and draw lines.
By utilizing the full power of the PC with hardware acceleration for graphics and fast JavaScript for animation, web developers can use IE9 to build deep, graphically rich experiences. Since canvas is an element like other elements in HTML, it participates in the page layout and its API is exposed to JavaScript so it can be fully incorporated into a web page's design. This makes it possible for sites to include things like live data visualizations, games, splash pages and ads without the need for any extra downloads or plugins.
The
IE testdrive site includes several examples that demonstrate the kinds of things that sites are now able to do in an interoperable way.
Shopping
The
Amazon Shelf shows what shopping for books could look like when the web site designer is able to use the kind of graphics, animations and smooth transitions that canvas enables.
Immersive game experiences:
The following demos showcase some gaming concepts like physics, character animation, collision detection and mouse interaction coupled with hardware accelerated graphics. In these demos, you'll notice that not all browsers can update the screen with the same frequency (FPS or frames per second). IE is able to maintain a high FPS by using
Windows technologies to make use of your GPU - your computer's hardware that's optimized for rendering graphics.
FishIE Tank
This demo makes use of sprites to animate the fish and basic collision logic to redirect the fish when they hit the edges of the tank. It’s also good for measuring graphics performance because you can change the number of fish to increase or decrease the graphics load.
