HTML5 Canvas, 2nd Edition

Communicating Between HTML Forms and the Canvas

Back in our JavaScript code, we need to create an event handler for the keyup event of textBox. We do this by finding the form element by using the document.getElementById() function of the DOM document object and storing it in the formElement variable. Then we call the addEventListener() method of formElement, setting the event to keyup and the event handler to the function textBoxChanged, which we have yet to define:

var formElement = document.getElementById("textBox");
formElement.addEventListener('keyup', textBoxChanged, false);

The final piece of the puzzle is to define the textBoxChanged() event handler. This function works like the event handlers we created in Chapter 1. It is passed one parameter when it is called, an event object that we universally name e because it’s easy to remember.

The event object contains a property named target that holds a reference to the HTML form element that created the change event. In turn, the target contains a property named value that holds the newly changed value of the form element that caused the event to occur (that is, textBox). We retrieve this value and store it in the message variable we created in JavaScript. It is the very same message variable we use inside the drawScreen() method to paint the canvas. Now, all we have to do is call drawScreen(), and the new value of message will appear “automagically” on the canvas:

function textBoxChanged(e) {
      var target = e.target;
      message = target ...