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
examples:
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-
tion.
However, because we could really use a nice color picker for Text Arranger, we will imple-
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,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
<input class=
"color"
id=
"textFillColor"
value=
"FF0000"
//>
