• Choose a category
• All
• Classic-Fiction

bottom

The bottom of the em square of the font glyphs. Choosing this baseline will push the font the farthest up (lowest y position) the canvas.

So, for example, if you want to place your text with a top baseline, you would use the following code:

context.textBaseline = "top";

All text displayed on the canvas afterward would have this baseline. To change the baseline, you would change the property:

context.textBaseline = "middle";

In reality, you will probably choose a single baseline for your app and stick with it, unless you are creating a word-processing or design application that requires more precise text handling.

Horizontal alignment

The context.textAlign property represents the horizontal alignment of the text based on its x position. These are the available textAlign values:

center

The dead horizontal center of the text. We can use this alignment to help center our text in Text Arranger.

start

Text is displayed directly after the text y position.

end

All text is displayed before the text y position.

left

Text is displayed starting with the y position of the text in the leftmost position (just like start).

right

Text is displayed with the y position in the rightmost position of the text (just like end).

For example, to set the text alignment to center, you would use the code:

context.textAlign = "center";

After this property is set, all text would be displayed with the y value of the text as the center point. However, this does not mean the text will be “centered” on the canvas. To do that, you need to find the center of the canvas, and use that location as the y value for the text position. We will do this in Text Arranger.

These values can also be modified by the dir attribute of the Canvas object (inherited from the DOM document object). dir changes the direction of how text is displayed; the valid values for dir are rtl (“right to left”) and ltr (“left to right”).

Handling text baseline and alignment

We are going to handle the text baseline and alignment much like we handled the other text properties in Text Arranger. First, we will add some variables to the canvasApp() function in which Text Arranger operates that will hold the alignment values. Notice that we have set the textAlign variable to center, helping us simplify centering the text on the canvas:

var textBaseline = "middle";

var textAlign = "center";

Next, we add the form elements for each new attribute to the HTML portion of the page:

Text Baseline

middle

top

hanging

alphabetic

ideographic

bottom

Text Align

center

start

end

left

right

We then add event listeners and event handler functions so we can connect the user interaction with the HTML form elements to the canvas display. We register the event listeners in the canvasApp() function:

formElement = document.getElementById("textBaseline");

formElement.addEventListener('change', textBaselineChanged, false);

formElement = document.getElementById("textAlign");

formElement.addEventListener('change', textAlignChanged, false);

Next, we need to create the event handler functions inside canvasApp():

function textBaselineChanged(e) {

var target = e.target;

textBaseline = target.value;

drawScreen();

}

function textAlignChanged(e) {

var target = e.target;

textAlign = target.value;

drawScreen();

}

We then apply the new values in the drawScreen() function:

context.textBaseline = textBaseline;

context.textAlign = textAlign;

Finally, we change the code that centers the text horizontally on the screen. Because we used the center alignment for context.textAlign,