The HTML5 Canvas Text API - HTML5 Canvas - page 158

When you pick a color with jsColor , it creates a text value that looks like “FF0000”, repres-
enting the color value chosen. However, we already know that we need to append the pound
(#) sign to the front of that value to work with HTML5 Canvas. The textFillColorChanged
event handler does this by appending “#” to the value of the textFillColor form control:

function function textFillColorChanged ( e ) {

var

var target = e . target ;
textFillColor = "#" + target . value ;
drawScreen ();

}

And let's not forget the event listener that we must create so that we can direct and “change”
events from the textFillColor <input> element to the textFillColorChanged() event
handler:

formElement = document . getElementById ( "textFillColor" );
formElement . addEventListener ( 'change' , textFillColorChanged , false false );

Finally, in the canvasApp() function, we need to create the textFillColor variable:

var textFillColor = "#ff0000" ;
We do this so that the variable can be updated by the aforementioned event handler and then
implemented when that event handler calls the drawScreen() function:

var

switch switch ( fillOrStroke ) {

case

case "fill" :
context . fillStyle = textFillColor ;
context . fillText ( message , xPosition , yPosition );
break break ;

case case "stroke" :

context . strokeStyle = textFillColor ;
context . strokeText ( message , xPosition , yPosition );
break

break ;
case case "both" :

context . fillStyle = textFillColor ;
context . fillText ( message , xPosition , yPosition );
context . strokeStyle = "#000000" ;
context . strokeText ( message , xPosition , yPosition );
break break ;

}

Notice that we needed to update the switch() statement created for Text Arranger version
1.0 so that it used textFillColor instead of hardcoded values. However, when both a stroke
and a fill are chosen, we still render the stroke as black (“#000000”). We could have added an