HTML and CSS Reference
In-Depth Information
Creating the necessary variables in the canvasApp() function
In the canvasApp() container function, we need to create four variables— fontSize ,
fontFace , fontWeight , and fontStyle —that will hold the values set by the HTML form
controls for Text Arranger. We create a default value for each so that the canvas can
render text the first time the drawScreen() function is called. After that, drawScreen()
will be called only when a change event is handled by one of the event handler functions
we will create for each form control:
var fontSize = "50";
var fontFace = "serif";
var fontWeight = "normal";
var fontStyle = "normal";
Setting event handlers in canvasApp()
Just like we did in version 1.0 of Text Arranger, we need to create event listeners and
the associated event handler functions so changes on the HTML page form controls
can interact with HTML5 Canvas. All of the event listeners below listen for a change
event on the form control:
formElement = document.getElementById("textSize");
formElement.addEventListener('change', textSizeChanged, false);
formElement = document.getElementById("textFont");
formElement.addEventListener('change', textFontChanged, false);
formElement = document.getElementById("fontWeight");
formElement.addEventListener('change', fontWeightChanged, false);
formElement = document.getElementById("fontStyle");
formElement.addEventListener('change', fontStyleChanged, false);
Defining event handler functions in canvasApp()
Below are the event handlers we need to create for each form control. Notice that each
handler updates the variable associated with part of the valid CSS font string, and then
calls drawScreen() so the new text can be painted onto the canvas:
function textSizeChanged(e) {
var target =;
fontSize = target.value;
function textFontChanged(e) {
var target =;
fontFace = target.value;
function fontWeightChanged(e) {
var target =;
Search WWH ::

Custom Search