The HTML5 Canvas Text API - HTML5 Canvas - page 139

Handling Basic Text in Text Arranger

For Text Arranger, we are going to allow the user to set the text displayed by the call to con-
text.fillText() . To do this, we will create a variable named message where we will store
the user-supplied text. We will later use that variable in our call to context.fillText() , in-
side the standard drawScreen() method that we introduced in Chapter 1 and will continue to
use throughout this topic:

var var message = "your text" ;

...

function function drawScreen () {

...
context . fillStyle = "#FF0000" ;
context . fillText ( message , 100 , 80 );

}

Tochangethetextdisplayedonthecanvastothetextenteredbytheuser,weneedtocreatean
event handler for the text box keyup event. This means that whenever someone changes text
in the box, the event handler function will be called.

Tomakethiswork,wearegoingtonameourtextboxinourHTML <form> usingan <input>
form element. Notice that the id is set to the value textBox . Also notice that we have set the
placeholder="" attribute. This attribute is new to HTML5, so it might not work in every
browser. You can also substitute it with the value="" attribute, which will not affect the exe-
cution of this application:

<form> <form>

Text: <input <input id= "textBox" placeholder= " your text "/>

<br>
</form>

<br>

</form>