The HTML5 Canvas Text API - HTML5 Canvas - page 147

ment to handle the choices. If the choice is both , we set the strokeStyle to black ( #000000 )
as the highlight for the colored fillText .

If we use the xPosition and yPosition calculated using the width and height of the canvas,
the message variable that contains the default or user-input text, and the fillOrStroke vari-
able to determine how to render the text, we can display the text as configured by the user in
drawScreen() :

var var metrics = context . measureText ( message );

var

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

var var yPosition = ( theCanvas . height / 2 );

switch switch ( fillOrStroke ) {

case case "fill" :

context . fillStyle = "#FF0000" ;
context . fillText ( message , xPosition , yPosition );
break break ;

case

case "stroke" :
context . strokeStyle = "#FF0000" ;
context . strokeText ( message , xPosition , yPosition );
break break ;

case

case "both" :
context . fillStyle = "#FF0000" ;
context . fillText ( message , xPosition , yPosition );
context . strokeStyle = "#000000" ;
context . strokeText ( message , xPosition , yPosition );
break break ;

}

Example 3-1 ( CH3EX1.html ) in the code distribution shows the full code for Text Arranger
1.0. Test it out to see how the user controls in HTML affect the canvas. There are not
many ways to change the text here, but you can see the difference between fillText and
strokeText .