HTML and CSS Reference
In-Depth Information
The hello world of any canvas demo starts with putting the
canvas element on your page. Initially the canvas is completely
invisible and by default it is 300 pixels wide by 150 pixels high:
<!DOCTYPE html>
<title>canvas hello world</title>
<canvas></canvas>
The canvas element is now in place. Use JavaScript to get the
2D context to allow you to draw:
var ctx = document.querySelector('canvas').
¬
getContext('2d');
Now that you have the context, you have access to the full
API to draw as you please. For instance, you can add simple
shapes to your canvas (
Figure 5.4
):
ctx.fillRect(10, 20, 50, 50);
FIguRE 5.4
A filled rectangle
using the default settings on a
canvas.
What about browser support?
Browser support is fairly good for the canvas element; four of the big five browsers support canvas in the
latest versions of the browser (and in fact its support is fairly good in previous versions of the browsers,
too). “What about Internet Explorer?” is the question that is perpetually asked.
For versions of IE that don't support canvas (IE8 and below), you can shim canvas support in a few ways. The
first is FlashCanvas which looks to be the most promising. It does have to rely on Flash as the backup, but it
should read all the canvas code and translate it for you to a Flash graphics layer:
http://lashcanvas.net
.
Similarly, there is a method using Silverlight and a library called html5canvas (
http://blogs.msdn.com/
silverlight.aspx
)
; and finally there is a library called excanvas
(
http://code.google.com/p/explorercanvas/
)
,
which translates the canvas API to Microsoft's VML.
These libraries don't cover the entirety of the 2D API, but they do cover most of the commonly used meth-
ods. Several demos show comparisons from examples in the wild. Out of these options, the web commu-
nity appears pretty positive about the FlashCanvas polyfill. It's just a little ironic to me that we're relying on
Flash (again) for a technology that's touted as replacing Flash. But, hey, this is the way of the web.
It's worth pointing out and being wary that these polyfills won't have the same performance as native
canvas. Without seeing charts upon charts upon charts, I would expect the FlashCanvas to perform the
best of the lot, but it won't be a like for like performance, particularly compared to when the browser has
hardware-accellerated canvas rendering as IE9 does.
