HTML and CSS Reference
In-Depth Information
Font Color
Setting the font color for text rendered on HTML5 Canvas is as simple as setting the con-
text.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 com-
ponent hexadecimal value, and BB is the blue component hexadecimal value. Here are some
context.fillStyle = "#FF0000";
context.fillStyle = "#FF0000";
Sets the text fill to red
context.strokeStyle = "#FF00FF";
Sets the text stroke to purple
context.fillStyle = "#FFFF00";
context.fillStyle = "#FFFF00";
Sets the text fill to yellow
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 col-
or . This handy new form control works directly in the web browser, allowing users to visu-
ally choose a color from a beautifully designed color picker. At the time of this writing, only
Chrome and Opera have implemented the color <input> object of the HTML5 specifica-
However, because we could really use a nice color picker for Text Arranger, we will imple-
ment 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
To implement jsColor and the color picker for Text Arranger, first download the jscolor.js
library,andputitinthesamefolderasTextArranger.Thenaddthislineofcodeinthe <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 Arranger
HTML page, and give it the CSS class designation color :
<input class= "color" id= "textFillColor" value= "FF0000" //>
Search WWH ::

Custom Search