• Choose a category
• All
• Classic-Fiction

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 = e.target;

fontSize = target.value;

drawScreen();

}

function textFontChanged(e) {

var target = e.target;

fontFace = target.value;

drawScreen();

}

function fontWeightChanged(e) {

var target = e.target;

fontWeight = target.value;

drawScreen();

}

function fontStyleChanged(e) {

var target = e.target;

fontStyle = target.value;

drawScreen();

}

Setting the font in the drawScreen() function

Finally, in the drawScreen() function, we put all of this together to create a valid CSS font string that we apply to the context.font property:

context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;

Figures 3-3 and 3-4 show the results.

Figure 3-3. Setting the font size and face

Figure 3-4. Setting the font as bold and italic

Font Color

Setting the font color for text rendered on HTML5 Canvas is as simple as setting the context.fillStyle or context.strokeStyle property to a valid CSS RGB color. Use the format “#RRGGBB”, where RR is the red component hexadecimal value, GG is the green component hexadecimal value, and BB is the blue component hexadecimal value. Here are some examples:

context.fillStyle = "#FF0000";

Sets the text fill to red.

context.strokeStyle = "#FF00FF";

Sets the text stroke to purple.

context.fillStyle = "#FFFF00";

Sets the text fill to yellow.

Handling font color with JSColor

For Text Arranger, we will allow the user to select the text color. We could have made this a drop-down or a text box, but instead, we want to use the new HTML5 type of color. This handy new form control works directly in the web browser, allowing users to visually choose a color from a beautifully designed color picker. At the time of this writing, only Opera has implemented the color object of the HTML5 specification.

However, since we could really use a nice color picker for Text Arranger, we will implement a third-party color picker, JSColor (http://jscolor.com/). The jsColor control creates a nice color picker in JavaScript (see Figure 3-5), similar to the one that will someday grace browsers supporting HTML5.

To implement jsColor and the color picker for Text Arranger, first download the jscolor.js library and put it in the same folder as Text Arranger. Then, add this line of code in the to include jsColor