• Choose a category
• All
• Classic-Fiction

By Root 6569 0

we no longer need to subtract half the width of the text that we retrieved through context.measureText() like we did previously in Text Arranger 1.0:

var metrics = context.measureText(message);

var textWidth = metrics.width;

var xPosition = (theCanvas.width/2) - (textWidth/2);

Instead, we can simply use the center point of the canvas:

var xPosition = (theCanvas.width/2);

Remember, center is only the default alignment for the text. Because you can change this with Text Arranger, the text can still be aligned in different ways while you are using the application.

Figure 3-6 shows how a font set to start alignment with a middle baseline might appear on the canvas.

Figure 3-6. Font with start alignment and middle baseline

Text Arranger Version 2.0

Now, try the new version of Text Arranger, shown in Example 3-2. You can see that we have added a ton of new options that did not exist in version 1.0. One of the most striking things is how fluidly the text grows and shrinks as the font size is updated. Now, imagine scripting the font size to create animations. How would you do that? Could you create an application to record the manipulations the user makes with Text Arranger, and then play them back in real time?

Also, notice how all the alignment options affect one another. Experiment with how changing the text direction affects the vertical alignment. Choose different font faces and see how they affect the baseline. Do you see how an application like Text Arranger can help you understand the complex relationships of all the text properties on HTML5 Canvas in an interactive and—dare we say—fun way?

Example 3-2. Text Arranger 2.0