HTML5 Guidelines for Web Developers

(coco) #1

134 Chapter 5—Canvas


The first four textBaseline keywords, top, middle, alphabetic and bottom are
self-explanatory. A hanging baseline is required by Devanagari, Gurmukhi, and
Bengali, three Indian alphabets used for writing the languages Sanskrit, Hindi,
Marathi, Nepali or Panjabi, and Bengali. The group of ideographic writing sys-
tems includes Chinese, Japanese, Korean, and Vietnamese. Figure 5.19 illustrates
the textBaseline vertical anchor points.

Figure 5.19 Vertical anchor points with “textBaseline”

5.6.4 Drawing and Measuring Text


Once font and anchor point have been determined, you only need to draw the
text. Similar to rectangles, you can decide on a fill and/or outline, and you can
even specify the maximum text width with an optional parameter, maxwidth:

context.fillText(text, x, y, maxwidth)
context.strokeText(text, x, y, maxwidth)

Finally, you can measure the text dimension with the method measureText(),
which can at least determine the width while taking into account the current for-
mat. In our example in Figure 5.20, the bottom right value (759) was calculated
using this method:

TextWidth = context.measureText(text).width
Free download pdf