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
specification.
However, since we could really use a nice color picker for Text Arranger, we will im-
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 = e.target;
textFillColor = "#" + target.value;
drawScreen();
}
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;
