Web Developer Basics: Using The HTML5 Canvas Element
Canvas is a unique concept. Unlike the rest of the HTML world that consists of well-defined pieces that designers and developers love to place in exactly the right spot, the Canvas element provides a virtual Etch-a-Sketch-like area where almost anything can be made to happen. It's relatively easy to describe but, like most open-ended concepts, more difficult to characterize. Canvas is a bit-mapped area whose width and height dimensions are specified as attributes (defaulting to 300 and 150 respectively); the purpose can be virtually anything, and the intention is that a canvas element will be rendered by scripting.
Show Me the HTML5 Code!Clearly the simplest possibility is <canvas></canvas>, and that gets you your very own 300x150 area, but you won't see it because the default is transparent (speaking of defaults, anything you actually draw on a canvas is black unless you specify otherwise). A more realistic beginning is something like this:
<canvas id="drawme" width="400" height="200"> If you can read this, your browser does not support Canvas. <canvas>Note that, similar to the video element, you can (and should) provide fallback content in case the browser doesn't yet support the canvas element. Actually, it's more than "should"...it's "must" in the words of the W3C definition:
"When authors use the canvas element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content may be placed as content of the canvas element."
So in a real-world web page, you'd want to include something that displays the closest equivalent to the contents of your fancy bitmapped graphic canvas. If your canvas showed a stock graph, you could use the current stock price. The intent is to allow the widest possible audience to see the most valuable and useful content, after all. The good news is that the current versions of all leading modern browsers already support canvas...except, of course, Internet Explorer (though it's coming in IE9).
The Mozilla Developer Network TemplateMozilla's Developer Network has created a nice template for use in demonstrating basic canvas functions, so we'll use that as the basis of our own example code:
The most important piece of all this is actually where you call getElementById using your named canvas id (which locates your canvas in the DOM), then call getContext to initialize the actual drawing context. Once you have a context (which we point to using ctx), you can manipulate it using anything you like in the 2D drawing APIs.
And the Function Is....In this case, we've used fillStyle to select solid red and fillRect to describe the boundaries of the rectangle to be drawn. You can now use this template to quickly experiment with any or all of the other functions in the APIs, by simply writing more complex code in place of those two lines. The x,y origin is defined to be at the top left, so knowing that, you can start making use of functions such as:
- fillRect (x,y, width, height) - paints the described rectangle (filled using the current fillStyle)
- strokeRect (x,y, width, height) - paints the described rectangle outline (using the current strokeStyle)
- clearRect (x,y,width,height) - clears the described rectangle and makes it transparent (transparent black, to be technical)
- beginPath() - starts a new drawing
- moveTo(x,y) - places the pen at the x,y location
- lineTo(x,y) - draws a line from the pen location to the x,y location
- arc(x, y, radius, startAngle, endAngle, anticlockwise) - draws an arc at x,y using radius from startAngle to endAngle (in radians). The arc is drawn clockwise unless the optional boolean anticlockwise parameter appears.
- stroke() - renders the drawing in outline form
- fill() - renders the drawing in filled form