When you pick a color with jsColor, it creates a text value that looks like “FF0000”, representing the color value chosen. However, we already know that we need to append the pound (#) sign to the front of that value to work with HTML5 Canvas. The textFillColorChanged event handler does this by appending “#” to the value of the textFillColor form control:

function textFillColorChanged(e) {

var target = e.target;

textFillColor = "#" + target.value;

drawScreen();

}

Oh yes, and let’s not forget the event listener we must create so that we can direct and “change” events from the textFillColor element to the textFillColorChanged() event handler:

formElement = document.getElementById("textFillColor");

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

Finally, in the canvasApp() function, we need to create the textFillColor variable:

var textFillColor = "#ff0000";

We do this so that the variable can be updated by the aforementioned event handler, and then implemented when that event handler calls the drawScreen() function:

switch(fillOrStroke) {

case "fill":

context.fillStyle = textFillColor;

context.fillText (message, xPosition,yPosition);

break;

case "stroke":

context.strokeStyle = textFillColor;

context.strokeText (message, xPosition,yPosition);

break;

case "both":

context.fillStyle = textFillColor;

context.fillText (message, xPosition ,yPosition);

context.strokeStyle = "#000000";

context.strokeText (message, xPosition,yPosition);

break;

}

Notice that we needed to update the switch() statement created for Text Arranger version 1.0 so that it used textFillColor instead of hardcoded values. However, when both a stroke and a fill are chosen, we still render the stroke as black (“#000000”). We could have added an additional color picker for the strokeColor, but that is something you can do if you want to start expanding the application. Figure 3-5 illustrates what it looks like now.

Figure 3-5. Setting the font color

Font Baseline and Alignment

You have options to align text on HTML5 Canvas both vertically and horizontally. These alignments affect the text in relation to Canvas itself, but only to the invisible bounding box that would surround the text’s topmost, bottommost, rightmost, and leftmost sides. This is an important distinction because it means these alignments affect the text in ways that might be unfamiliar to you.

Vertical alignment

The font baseline is the vertical alignment of the font glyphs based on predefined horizontal locations in a font’s em square (the grid used to design font outlines) in relation to font descenders. Basically, font glyphs, like lowercase p and y that traditionally extend “below the line,” have descenders. The baseline tells the canvas where to render the font based on how those descenders relate to other glyphs in the font face.

The HTML5 Canvas API online has a neat graphic that attempts to explain baseline. We could copy it here, but in reality, we think it’s easier to understand by doing, which is one of the main reasons we wrote the Text Arranger application.

The options for the context.textBaseline property are:

top

The top of the text em square and the top of the highest glyph in the font face. Selecting this baseline will push the text the farthest down (highest y position) the canvas of all the baselines.

hanging

This is a bit lower than the top baseline. It is the horizontal line from which many glyphs appear to “hang” from near the top of their face.

middle

The dead vertical center baseline. We will use middle to help us vertically center the text in Text Arranger.

alphabetic

The bottom of vertical writing script glyphs such as Arabic, Latin, and Hebrew.

ideographic

The bottom of horizontal writing script glyphs such