Class: Font

Font

The Font class stores the font internally as a CSS font string but makes it easy to change individual components of the font. For example, the size can be changed using the size method. A font consists of 3 components:

Component Description
family This can be a generic family (e.g. serif, sans-serif, monospace) or a specific font family (e.g. Times New Roman, Arial, or Courier)
style One of plain, bold, italic, or bold-italic
size The size of the font in pixels. The size will be adjusted for retina displays.

new Font(font)

Font.js, line 30

Create a new Font. The Font can be created using a string or an object representing the font.

Name Type Description
font String | Object

If a string is provided, it must have the following format: family,style,size (e.g. 'serif,plain,12'). If an object is provided, it must have a family, style and size property (e.g. { family: 'serif', style: 'plain', size: 12 })

Members

boldBoolean

Get or set the font boldness.

cssString

Return the font as CSS usable string. This is also how the font is stored internally for quick access.

familyString

Get or set the font family. Defaults to sans-serif.

heightNumber

Get the font height. This will be the same as the font size.

italicBoolean

Get or set the font italics.

sizeNumber

Get or set the font size. The size is stored as a number and is in pixels. The actual value may be altered when setting it to take into account the pixel ratio of the screen. Defaults to 12.

stringString

Get or set the font using a simple string format: family,style,size (e.g. 'serif,plain,12').

styleString

Get or set the font style. The possible values are plain, bold, italic and bold-italic. Defaults to plain.

Methods

toString(){String}

Font.js, line 39

Return the class name as a string.

Returns:
Type Description
String
  • 'Font'

width(context, text){Number}

Font.js, line 203

Measure the width of the supplied text using the context and the Font settings.

Name Type Description
context Context

The canvas context to use to measure the width.
text String

The text to measure.
Returns:
Type Description
Number
  • The width of the text in pixels.