The HTML5 Canvas Text API - HTML5 Canvas - page 146

<option <option value = "both" > both </option> </option>

</select>

Inthe canvasApp() function,wewilldefineavariablenamed fillOrStroke thatwewilluse
to hold the value selected by the user on the HTML <form> . The default value will be fill ,
which means Text Arranger will always show fillText first:

var 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 false );

And create the function fillOrStrokeChanged() to handle the event:

function function fillOrStrokeChanged ( e ) {

var 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,suchasthefollowing, astheireventhandlerforchanges madetotheHTMLele-
ment that controls Text Arranger:

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

formElement . addEventListener ( 'keyup' , function

function ( e ) {

false );
formElement = document . getElementById ( "fillOrStroke" );
formElement . addEventListener ( 'change' , function

applyChange ( 'message' , e ) }, false

function ( e ) {
applyChange ( 'fillOrStroke' , e ) }, false

false );

function function applyChange ( variable , e ) {

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

}

The preceding code uses eval() to create and execute JavaScript code on the fly. It dynamically cre-
ates the name of the HTML element so that the multiple event handler functions do not need to be
createdindividually.However,manydevelopersarewaryofusing eval() becauseitopensupsecur-
ity holes, and makes debugging code more difficult. Use at your own risk.

In the drawScreen() function, we test the fillOrStroke variable to see whether it contains
thevalue fill .Because wehavethreestates ( fill , stroke ,or both ),weusea switch state-