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.

Start your free trial