Text

« Ovals and Circles | UserGuide | User Input »

You often want to put text inside a drawing, for example, to label some of the parts. EzGraphics supports adding text to a canvas and provides methods for changing various properties used in drawing the text.

Drawing Text

When text is drawn on a canvas, it is placed inside an invisible bounding box that contains an anchor point. The anchor is the reference point used to position the text on the canvas. By default, the anchor is in the upper-left or northwest corner of the bounding box.

To draw text on the canvas, use the drawText() canvas method

where text is a string containing the text to be drawn and the x and y values are the coordinates where the anchor point is positioned on the canvas. For example, the command

draws the given string on the canvas such that the anchor is positioned at point (10, 20). Consider the following example that adds text to a simple drawing

The string passed to the drawText() method can contain multiple lines of text, in which the individual lines are separated by newline (\n) characters.

When the string is drawn on the canvas, the text will automatically be wrapped at each line break (\n).

By default, the lines of text are left-justified within the bounding box.

Text Properties

There are several drawing properties that influence how text is drawn on the canvas. The color of the text is indicated by the outline color, the same color used in drawing shapes. In addition, you can change the font used to draw the text, change the position of the anchor on the bounding box, and set the justification and alignment of multi-lined text.

Anchor

The use of an anchor point to position text on the canvas allows you to more easily align text in relation to the edges of the canvas or to other shapes and text. There are 9 possible positions at which the anchor can be placed on the bounding box.

The choice of anchor depends on how you want to align text relative to the canvas or other shapes. The following figure illustrates when the nine anchor positions are commonly used

To change the position of the anchor used to draw new text on the canvas, use the setTextAnchor() canvas method

For example, if we want to vertically and horizontally align text on the canvas, as we did on the canvas above with the text “Two Arcs”, it’s easier if we move the anchor to the center

Then, we need only give the center point of the canvas, no matter how long the string is, and it will be properly aligned

The argument passed to the setTextAnchor() method must be one of the following strings that indicate one of the 9 possible positions:

Font

Justification

Sample Program

« Ovals and Circles | UserGuide | User Input »