Class: 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)

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



Get or set the font boldness.


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


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


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


Get or set the font italics.


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.


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


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



Return the class name as a string.

Type Description
  • 'Font'

width(context, text){Number}

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.

Type Description
  • The width of the text in pixels.