HTML5 Game - Canvas Font properties

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Text Drawing

Font attributes

You can set a number of font properties by using context.font: style, weight, size, and face.

These are based on Cascading Style Sheet (CSS) specifications.

Not all values are required.

If values aren't specified, the defaults are applied.

The format of the statement to assign font attributes is 

context.font = "style weight size face";

For example: 

context.font = "italic bold 20px arial";

Font style

Styles available include:

  • normal (the default)
  • italic
  • oblique (usually associated with sans-serif faces)
  • inherit (style comes from the parent element)

Font weight

Weights available include

  • normal (the default)
  • bold | bolder
  • lighter
  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • inherit (weight comes from the parent element)

Font size

Font sizes can be specified in:

  • px (pixels) for exact size
  • pt (points) for exact size
  • em (ems) 1 em is equal to the font size set for the web page

Font face

Font faces, or type faces, give text their individual appearance.

The font faces supported depend on the browser displaying the web page.

We can specify a font family name for the font face: sans-serif, serif, or monospace.

To specify an individual font name, some choices that are generally supported by browsers are

  • Sans-serif: Arial, Verdana
  • Serif: Georgia, Times New Roman, Times
  • Monospace: Courier New, Courier

Related Topic