HTML and CSS Reference
In-Depth Information
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 <input>
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 <input> object of the HTML5
However, since we could really use a nice color picker for Text Arranger, we will im-
plement a third-party color picker, JSColor ( ) . 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 <head> to include jsColor in the HTML page:
<script type="text/javascript" src="jscolor/jscolor.js"></script>
Then add a new <input> element to the ever-growing HTML <form> on the Text Ar-
ranger HTML page, and give it the CSS class designation color :
<input class="color" id="textFillColor" value="FF0000"/>
When you pick a color with jsColor , it creates a text value that looks like “FF0000”,
representing the color value chosen. However, we already know that we need to append
the pound (#) sign to the front of that value to work with HTML5 Canvas. The
textFillColorChanged event handler does this by appending “#” to the value of the
textFillColor form control:
function textFillColorChanged(e) {
var target =;
textFillColor = "#" + target.value;
Oh yes, and let's not forget the event listener we must create so that we can direct and
“change” events from the textFillColor <input> element to the textFillColor
Changed() event handler:
formElement = document.getElementById("textFillColor");
formElement.addEventListener('change', textFillColorChanged, false);
Finally, in the canvasApp() function, we need to create the textFillColor variable:
var textFillColor = "#ff0000";
We do this so that the variable can be updated by the aforementioned event handler,
and then implemented when that event handler calls the drawScreen() function:
switch(fillOrStroke) {
case "fill":
context.fillStyle = textFillColor;
Search WWH ::

Custom Search