22.5. Graphics in a <canvas>The next stop in our tour of client-side vector-graphics technologies is the <canvas> tag. This nonstandard HTML element is explicitly designed for client-side vector graphics. It has no appearance of its own but exposes a drawing API to client-side JavaScript so that scripts can draw anything they want into a canvas. The <canvas> tag was introduced by Apple in the Safari 1.3 web browser. (The reason for this radical extension to HTML is that the HTML rendering capability of Safari is also used by the Dashboard component of the Mac OS X desktop, and Apple wanted a way to support scripted graphics in Dashboard.) Firefox 1.5 and Opera 9 have followed Safari's lead. Both browsers also support the <canvas> tag. You can even use the <canvas> tag in IE, with open source JavaScript code (initially from Google) that builds canvas compatibility on top of IE's VML support. (see http://excanvas.sourceforge.net). Standardization efforts for the <canvas> tag are underway by an informal consortium of web browser manufacturers, and a preliminary specification can be found at http://www.whatwg.org/specs/web-apps/current-work. An important difference between the <canvas> tag and SVG and VML is that <canvas> has a JavaScript-based drawing API while SVG and VML describe a drawing with an XML document. These two approaches are functionally equivalent: either one can be simulated with the other. On the surface, they are quite different, however, and each has its strengths and weaknesses. An SVG drawing, for example, is easily edited by removing elements from its description. To remove an element from the same graphic in a <canvas> tag, it is often necessary to erase the drawing and redraw it from scratch. Since the Canvas drawing API is JavaScript-based and relatively compact (unlike the SVG and VML grammars), it is documented in this book. See Canvas, CanvasRenderingContext2D, and related entries in Part IV. Most of the Canvas drawing API is defined not on the <canvas> element itself but instead on a "drawing context" object obtained with the getContext( ) method of the canvas.[*] This script draws a small red square and blue circle and is typical for drawing to a canvas:
<head> <script> window.onload = function( ) { // Do the drawing when the document loads var canvas = document.getElementById("square"); // Get canvas element var context = canvas.getContext("2d"); // Get 2D drawing context context.fillStyle = "#f00"; // Set fill color to red context.fillRect(0,0,10,10); // Fill a square canvas = document.getElementById("circle"); // New canvas element context = canvas.getContext("2d"); // Get its context context.fillStyle = "#00f"; // Set blue fill color context.beginPath( ); // Begin a shape // Add a complete circle of radius 5 centered at (5,5) to the shape context.arc(5, 5, 5, 0, 2*Math.PI, true); context.fill( ); // Fill the shape } </script> </head> </body> This is a red square: <canvas width=10 height=10></canvas>. This is a blue circle: <canvas width=10 height=10></canvas>. In previous sections, you've seen that SVG and VML describe complex shapes as a "path" of lines and curves that can be drawn or filled. The Canvas API also uses the notion of a path. But instead of describing a path as a string of letters and numbers, a path is defined by a series of method calls, such as the beginPath( ) and arc( ) invocations in the example. Once a path is defined, other methods, such as fill( ), operate on that path. Various properties of the drawing context, such as fillStyle, specify how these operations are performed. One reason the Canvas API can be so compact is that it does not provide any support for drawing text. To incorporate text into a <canvas> graphic, you must either draw it yourself, incorporate it with bitmap images, or overlay HTML text on top of the <canvas> with CSS positioning. Example 22-11 shows how to draw pie charts using a canvas. Much of the code in this example will be familiar from the SVG and VML examples. The new code in the example is the Canvas API, and you can look up those methods in Part IV. Example 22-11. Drawing a pie chart in a <canvas> tag
|