The HTML5 Canvas Text API - HTML5 Canvas - page 151

Generic font faces

Because we cannot be sure which font will be available in the browser at any time, we have
limitedthefontfacechoicesinTextArrangertothosethataredefinedas“generic”intheCSS
specification: serif , sans-serif , cursive , fantasy , and monospace .

Here is the markup we used to create the font face <select> box in HTML:

<select <select id= "textFont" >

<option

<option value= "serif" > serif </option> </option>

<option <option value= "sans-serif" > sans-serif </option> </option>

<option <option value= "cursive" > cursive </option> </option>

<option <option value= "fantasy" > fantasy </option> </option>

<option <option value= "monospace" > monospace </option> </option>

</select>

FALLBACK AND CUSTOM FONT FACES

While the preceding fonts are safe for every browser, you can specify any font that you are certain
will be available for the user. For multiple fallback fonts, you can separate the font face designations
with a comma, like this:

context . font = "normal lighter 50px arcade, monospace" ;

Also,aslongasthefontshavebeenloaded,theCanvascanusecustomfontsdesignatedinCSSusing
@font-face like this:

@font-face @font-face {

font-family

font-family : Arcade Arcade ;

src src : url url ( 'arcade.otf' );

}

Font size and HTML5 range control

To specify the size of the font, we have implemented the new HTML5 range form control.
range is an <input> type that creates a slider on the HTML page to limit the numerical input
to that specified in the range. A range is created by specifying range as the type of a form
input control. range has four properties that can be set:

min

The minimum value in the range

max

The maximum value in the range