130 Chapter 5—Canvas
circle(900,400,240,0);
circle(900,400,120,1);
context.fill();
context.stroke();After stroke() and fill(), we need only one other method for drawing paths—
the method
context.clip().
The explanation is as short as its name: clip() ensures that the defined path is
not drawn but used as a cutout for all other drawing elements. Anything within
the mask remains visible; the rest is hidden. You can reset the mask by creating
another clipping mask using the entire canvas area as geometry. We will encoun-
ter a more elegant method later on, in section 5.13, with save() and restore().
Let’s now move on to the topic of text, a topic to which the specification devotes
only four pages. Could it be that text support in Canvas is not exactly great?5.6 Text
At first glance, it is probably true that text support in Canvas is not great, because
the options for using text in Canvas are meager and limited to formatting and po-
sitioning simple character strings. There is no running text with automatic line
breaks, nor paragraph formats or the option to select already existing texts.
We are left with three attributes for determining text attributes, two methods for
drawing text, and one method for determining text length of a character string
while taking into account the current format. This does not seem like much, but
if we look more closely, it becomes clear that those four pages of specification are
based on well-thought-out details.5.6.1 Fonts
The definition of the font attribute simply refers to the CSS specification and
states that context.font is subject to the same syntax as the CCS font shorthand
notation:context.font = [ CSS font property ]In this manner, all font properties can be easily specified in a single string. Table
5.2 lists the individual components and their possible values.