The HTML5 Canvas Text API - HTML5 Canvas - page 184

Now, let's jump to the HTML of our <form> . Because we have created different ways to fill
the text we are displaying, we need to build a selection that allows for this choice. We will
create a <select> box with the id of fillType for this purpose:

Fill Type: <select <select id= "fillType" >

<option <option value= "colorFill" > Color Fill </option> </option>

<option <option value= "linearGradient" > Linear Gradient </option> </option>

<option <option value= "radialGradient" > Radial Gradient </option> </option>

<option <option value= "pattern" > pattern </option> </option>

</select>
We need to add a second color selection that we can use for the gradient fills. We will use the
jsColor picker and the id textColorFill2 :

</select>

Text Color 2: <input <input class= "color" id= "textFillColor2" value = "000000" //>

<br>

Back in canvasApp() , we need to create the event listeners for our two new form elements:

formElement = document . getElementById ( "textFillColor2" );
formElement . addEventListener ( 'change' , textFillColor2Changed , false false );

formElement = document . getElementById ( "fillType" );
formElement . addEventListener ( 'change' , fillTypeChanged , false false );

We also need to create the associated event handler functions for the new form elements:

function function textFillColor2Changed ( e ) {

var var target = e . target ;

textFillColor2 = "#" + target . value ;
drawScreen ();

}

function function fillTypeChanged ( e ) {

var var target = e . target ;

fillType = target . value ;
drawScreen ();

}

We need to add support to drawScreen() for this new functionality. First, we use the meas-
ureText() method of the context to get the width of the text, which we will use to create the
gradients:

var var metrics = context . measureText ( message );

var

var textWidth = metrics . width ;