The HTML5 Canvas Text API - HTML5 Canvas - page 163

</select>
We then add event listeners and event handler functions so that we can connect the user inter-
action with the HTML form elements to the canvas display. We register the event listeners in
the canvasApp() function:

</select>

formElement = document . getElementById ( "textBaseline" );
formElement . addEventListener ( 'change' , textBaselineChanged , false false );

formElement = document . getElementById ( "textAlign" );
formElement . addEventListener ( 'change' , textAlignChanged , false false );

Next, we need to create the event handler functions inside canvasApp() :

function function textBaselineChanged ( e ) {

var

var target = e . target ;
textBaseline = target . value ;
drawScreen ();

}

function function textAlignChanged ( e ) {

var 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 half the width
of the text that we retrieved through context.measureText() like we did previously in Text
Arranger 1.0:

var var metrics = context . measureText ( message );

var var textWidth = metrics . width ;

var

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

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

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