The HTML5 Canvas Text API - HTML5 Canvas - page 152

step

The number of units to step when the range slider is moved

value

The default value of the range
Here is the markup we used to specify the range in the Text Arranger HTML:

<input <input type= "range" id= "textSize"

min= "0"
max= "200"
step= "1"
value= "50" //>

If the browser does not support this range control, it will be rendered as a text box.

NOTE

At the time of this writing, range did not render in Firefox or any version of Internet Explorer 10.

Creating the necessary variables in the canvasApp() function

In the canvasApp() container function, we need to create four variables— fontSize ,
fontFace , fontWeight , and fontStyle —that will hold the values set by the HTML form
controlsforTextArranger.Wecreateadefaultvalueforeachsothatthecanvascanrendertext
the first time the drawScreen() function is called. After that, drawScreen() will be called
onlywhena change eventishandledbyoneoftheeventhandlerfunctionsthatwewillcreate
for each form control:

var var fontSize = "50" ;

var var fontFace = "serif" ;

var

var fontWeight = "normal" ;
var

var fontStyle = "normal" ;

Setting event handlers in canvasApp()

Justlikewedidinversion1.0ofTextArranger,weneedtocreateeventlistenersandtheasso-
ciated event handler functions so that changes on the HTML page form controls can interact
with HTML5 Canvas. All of the following event listeners listen for a change event on the
form control:

formElement = document . getElementById ( "textSize" );
formElement . addEventListener ( 'change' , textSizeChanged , false

false );