HTML5 Canvas, 2nd Edition

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 context.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(), inside the standard drawScreen() method that we introduced in Chapter 1 and will continue to use throughout this book:

var message = "your text";
...

function drawScreen() {
  ...
  context.fillStyle = "#FF0000";
  context.fillText  (message, 100, 80);
}

To change the text displayed on the canvas to the text entered by the user, we need to create an 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.

To make this work, we are going to name our text box in our HTML <form> using an <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 execution of this application:

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