HTML5 Canvas [28]
var formElement = document.getElementById("textBox");
formElement.addEventListener('keyup', textBoxChanged, false);
The final piece of the puzzle is to define the textBoxChanged() event handler. This function works like the event handlers we created in Chapter 1. It is passed one parameter when it is called, an event object that we universally name e because it’s easy to remember.
The event object contains a property named target that holds a reference to the HTML form element that created the change event. In turn, the target contains a property named value that holds the newly changed value of the form element that caused the event to occur (i.e., textBox). We retrieve this value, and store it in the message variable we created in JavaScript. It is the very same message variable we use inside the drawScreen() method to paint the canvas. Now, all we have to do is call drawScreen(), and the new value of message will appear “automagically” on the canvas:
function textBoxChanged(e) {
var target = e.target;
message = target.value;
drawScreen();
}
We just spent a lot of time describing how we will handle changes in HTML form controls with event handlers in JavaScript, and then display the results on an HTML5 Canvas. We will repeat this type of code several more times while creating Text Arranger. However, we will refrain from explaining it in depth again, instead focusing on different ways to render and capture form data and use it with Canvas.
Using measureText
The HTML5 Canvas context object includes a useful method, measureText(). When supplied with a text string, it will return some properties about that text based on the current context settings (font face, size, etc.) in the form of a TextMetrics object. Right now the TextMetrics object has only a single property: width. The width property of a TextMetrics object gives you the exact width in pixels of the text when rendered on the canvas. This can be very useful when attempting to center text.
Centering text using width
For the Text Arranger application, we will use the TextMetrics object to center the text the user has entered in the textBox form control on the canvas. First, we retrieve an instance of TextMetrics by passing the message variable (which holds the text we are going to display) to the measureText() method of the 2D context, and storing it in a variable named metrics:
var metrics = context.measureText(message);
Then, from the width property of metrics, we get the width of the text in pixels and store it in a variable named textWidth:
var textWidth = metrics.width;
Next, we calculate the center of the screen by taking the width of the canvas and dividing it in half (theCanvas.width/2). From that, we subtract half the width of the text (textWidth/2). We do this because text on the canvas is vertically aligned to the left when it is displayed without any alignment designation (more on this a bit later). So, to center the text, we need to move it half its own width to the left, and place the center of the text in the absolute center of the canvas. We will update this in the next section when we allow the user to select the text’s vertical alignment:
var xPosition = (theCanvas.width/2) - (textWidth/2);
What about the height of the text?
So, what about finding the height of the text so you can break text that is longer than the width of the canvas into multiple lines, or center it on the screen? Well, this poses a problem. The TextMetrics object does not contain a height property. The text font size does not give the full picture either, as it does not take into account font glyphs that drop below the baseline of the font. While the font