HTML and CSS Reference
In-Depth Information
Text: <input id="textBox" placeholder=" your text "/>
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 using the document.getElement
ById() 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
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 pa-
rameter 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 (i.e., 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 draw
Screen() , and the new value of message will appear “automagically” on the canvas:
function textBoxChanged(e) {
var target =;
message = target.value;
We just spent a lot of time describing how we will handle changes in HTML form
controls with event handlers in JavaScript, and then display the results on an HTML5
Canvas. We will repeat this type of code several more times while creating Text Ar-
ranger. However, we will refrain from explaining it in depth again, instead focusing on
different ways to render and capture form data and use it with Canvas.
Using measureText
The HTML5 Canvas context object includes a useful method, measureText() . When
supplied with a text string, it will return some properties about that text based on the
current context settings (font face, size, etc.) in the form of a TextMetrics object. Right
now the TextMetrics object has only a single property: width . The width property of a
Search WWH ::

Custom Search