javascript

Chapter 21: Upcoming API s
Figure 21-4
Paths are the primary drawing mechanism for the 2D drawing context because they provide more control
over what is drawn. Since paths are used so often, there is also a method called isPointInPath() , which
accepts an x - coordinate and a y - coordinate as arguments. This method can be called anytime before the
path is closed to determine if a point exists on the path, as shown here:
if (context.isPointInPath(100, 100)){
alert(“Point (100, 100) is in the path.”);
}
The path API for the 2D drawing context is robust enough to create very complex images using multiple
fill styles, stroke styles, and more.
Drawing Text
Since it ’ s often necessary to mix text and graphics, the 2D drawing context provides methods to draw
text. There are two methods for drawing text, fillText() and strokeText() , and each takes four
arguments: the string to draw, the x - coordinate, the y - coordinate, and an optional maximum pixel width
to draw. Both methods base their drawing on the following three properties:
❑
❑
❑
font — Indicates the font style, size, and family in the same manner specified in CSS, such as
“ 10px Arial ” .
textAlign — Indicates how the text should be aligned. Possible values are “ start ” , “ end ” ,
“ left ” , “ right ” , and “ center ” .
textBaseline — Indicates the baseline of the text. Possible values are “ top ” , “ hanging ” ,
“ middle ” , “ alphabetic ” , “ ideographic ” , and “ bottom ” .
Each of these properties has a default value, so there ’ s no need to set them each time you want to draw
text. The fillText() method uses the fillStyle property to draw the text, whereas the strokeText()
method uses the strokeStyle property. You will probably use fillText() most of the time, since this
mimics normal text rendering on web pages. For example, the following renders a 12 at the top of the
clock created in the last section:
context.font = “bold 10px Arial”;
context.textAlign = “center”;
context.textBaseline = “middle”;
context.fillText(“12”, 100, 80);
687