The HTML5 Canvas Text API - HTML5 Canvas - page 88

var textBaseline = "middle";
var textAlign = "center";
Next, we add the <select> form elements for each new attribute to the HTML portion
of the page:
Text Baseline <select id="textBaseline">
<option value="middle">middle</option>
<option value="top">top</option>
<option value="hanging">hanging</option>
<option value="alphabetic">alphabetic</option>
<option value="ideographic">ideographic</option>
<option value="bottom">bottom</option>
</select>
<br>
Text Align <select id="textAlign">
<option value="center">center</option>
<option value="start">start</option>
<option value="end">end</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
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 , we no longer need to subtract