• Choose a category
• All
• Classic-Fiction

By Root 6339 0

size will help you estimate how to center a font vertically on the screen, it does not offer much if you need to break text onto two or more lines. This is because the spacing would also need to be taken into account, which could be very tricky.

For our demonstration, instead of trying to use the font size to vertically center the text on the canvas, we will create the yPosition variable for the text by simply placing it at one-half the height of the canvas. The default baseline for a font is middle, so this works great for centering on the screen. We will talk more about baseline in the next section:

var yPosition = (theCanvas.height/2);

NOTE

In the chat example in Chapter 11, we will show you an example of breaking up text onto multiple lines.

fillText and strokeText

The context.fillText() function (as shown in Figure 3-1) will render solid colored text to the canvas. The color used is set in the context.fillColor property. The font used is set in the context.font property. The function call looks like this:

fillText([text],[x],[y],[maxWidth]);

where:

text

The text to render on the canvas.

x

The x position of the text on the canvas.

y

The y position of the text on the canvas.

maxWidth

The maximum width of the text as rendered on the canvas. At the time of this writing, support for this property was just being added to browsers.

Figure 3-1. fillText in action

The context.strokeText() function (as shown in Figure 3-2) is similar, but it specifies the outline of text strokes to the canvas. The color used to render the stroke is set in the context.strokeColor property; the font used is set in the context.font property. The function call looks like:

strokeText([text],[x],[y],[maxWidth])

where:

text

The text to render on the canvas.

x

The x position of the text on the canvas.

y

The y position of the text on the canvas.

maxWidth

The maximum width of the text as rendered on the canvas. At the time of this writing, this property does not appear to be implemented in any browsers.

Figure 3-2. strokeText setting outline properties

The next iteration of Text Arranger adds the ability for the user to select fillText, strokeText, or both. Selecting both will give the fillText text a black border (the strokeText). In the HTML

, we will add a box with the id fillOrStroke, which will allow the user to make the selections:

Fill Or Stroke:

fill

stroke

both

In the canvasApp() function, we will define a variable named fillOrStroke that we will use to hold the value selected by the user on the HTML . The default value will be fill, which means Text Arranger will always show fillText first:

var fillOrStroke = "fill";

We will also create the event listener for a change in the fillOrStroke form element…

formElement = document.getElementById("fillOrStroke");

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

…and create the function fillOrStrokeChanged() to handle the event:

function fillOrStrokeChanged(e) {

var target = e.target;

fillOrStroke = target.value;

drawScreen();

}

EVAL()

While we created a separate function for each event handler for the applications in this chapter, in reality many of them work in an identical way. However, some developers might be inclined to use an eval() function, such as the following, as their event handler for changes made to the HTML element that controls Text Arranger:

var formElement = document.getElementById("textBox");

formElement.addEventListener('keyup', function(e) {

applyChange('message', e) }, false);

formElement = document.getElementById("fillOrStroke");

formElement.addEventListener('change', function(e) {

applyChange('fillOrStroke', e) }, false);

function applyChange (variable, e) {

eval(variable + ' = e.target.value');

drawScreen();

}

The code above uses eval() to create and execute JavaScript code on the fly. It dynamically creates the name of the HTML element