176 Chapter 5—Canvas
If you do not want to install an Apache server and you have access to Python, you
can use just one line to start a rudimentary web server in the current directory at
port 8000 and then address the content of this directory in the browser via the
url http://localhost:8000:python -m SimpleHTTPServer5.15.4 Browser Support
The current versions of Firefox as well as Safari, Chrome, and Opera support a
large part of the Canvas specification. If you want to see Canvas in IE, you will
have to use IE9, which offers hardware-accelerated support for Canvas. This
makes workarounds for IE8 such as Google’s Chrome Frame Plugin (http://
code.google.com/chrome/chromeframe) or the JavaScript shim explorercanvas
(http://code.google.com/p/explorercanvas) obsolete.
As you would expect, there are slight differences in the degree to which those
browsers that already support Canvas have implemented it. A useful source
for determining the degree of implementation is the Canvas Testsuite by Phil-
ip Taylor with approximately 800 tests and a table of test results for the main
browsers at http://philip.html5.org/tests/canvas/suite/tests.
All examples in this Canvas chapter were created with Firefox, as you can see in
the screen shots. At the time of this writing, all examples worked fine in Firefox
except for the representation of fonts in small-caps. Safari, Opera, IE9, and
Chrome also score quite well with our examples—Safari and Opera more so than
IE9 and Chrome.
Because every new release of the common browsers can result in improvements
regarding Canvas implementation, regularly updated details of how the exam-
ples in our book run in different browsers are provided in the Canvas index on
the companion website at http://html5.komplett.cc/code/chap_canvas/index_
en.html.5.15.5 Further Links
A good starting point for exploring Canvas is a portal describing itself as Home
to applications, games, tools and tutorials that use the HTML 5 <canvas> ele-
ment at http://www.canvasdemos.com; it offers a series of interesting links.
Worth a look is also the extensive Canvas tutorial in Mozilla’s developer center
at https://developer.mozilla.org/en/canvas_tutorial and http://hacks.mozilla.
org/category/canvas, a blog of the Mozilla community focusing on advanced
application examples.TIP