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
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 Chrome and Opera have implemented the color <input>
object of the HTML5
specification.
However, because we could really use a nice color picker for Text
Arranger, we will implement 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 ...
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.