HTML and CSS Reference
In-Depth Information
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 message = "your text" ;
function drawScreen () {
context . fillStyle = "#FF0000" ;
context . fillText ( message , 100 , 80 );
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:
Text: <input
<input id= "textBox" placeholder= " your text "/>
Search WWH ::

Custom Search