Online Book Reader

Home Category

HTML5 Canvas [31]

By Root 6386 0

Fill Or Stroke :


Setting the Text Font

Now that we have placed text on the canvas, it’s time to explore some of the basics of setting the context.font property. As you will see, specifying the font for displaying basic text on Canvas is really no different from doing the same thing in HTML and CSS.

Font Size, Face Weight, and Style Basics


It is very easy to style text that will be rendered on the canvas. It requires you to set the size, weight, style, and font face in a CSS-compliant text string that is applied to the context.font property. The basic format looks like this:

[font style] [font weight] [font size] [font face]

An example might be:

context.font = "italic bold 24px serif";

or:

context.font = "normal lighter 50px cursive";

Once the context.font property is set, it will apply to all text that is rendered afterward—until the context.font is set to another CSS-compliant string.

Handling Font Size and Face in Text Arranger


In Text Arranger, we have implemented only a subset of the available font options for displaying text. We have chosen these to make the application work in as many browsers as possible. Here is a short rundown of the options we will implement.

Available font styles


CSS defines the valid font styles as:

normal | italic | oblique | inherit

In Text Arranger, we have implemented all but inherit.

Here is the markup we used to create the font style

Available font weights


CSS defines the valid font weights as:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | auto

We have used only normal, bold, bolder, and lighter in Text Arranger. You can add the other values as you see fit.

Here is the markup we used to create the font weight

Generic font faces


Because we cannot be sure which font will be available in the browser at any time, we have limited the font face choices in Text Arranger to those that are defined as “generic” in the CSS specification: serif, sans-serif, cursive, fantasy, and monospace.

Here is the markup we used to create the font face

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 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

step

The number of units to step when the range slider is moved

value

The default value of the range

Here is the markup we used to specify the range in the Text Arranger HTML:

min="0"

max="200"

step="1"

value="50"/>

If the browser does not support this range control, it will be rendered as a text box.

NOTE

At the time of this writing, range did not render in Firefox.

Creating

Return Main Page Previous Page Next Page

®Online Book Reader