THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP HOW TO JQUERY W3.CSS ANGULARJS XML MORE FORUM EXAMPLES REFERENCES

HTML canvas font Property

❮ HTML Canvas Reference

Example

Write a 30px high text on the canvas, using the font "Arial":

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Try it Yourself »

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
font Yes 9.0 Yes Yes Yes

Definition and Usage

The font property sets or returns the current font properties for text content on the canvas.

The font property uses the same syntax as the CSS font property.

Default value: 10px sans-serif
JavaScript syntax: context.font="italic small-caps bold 12px arial";

Property Values

Values Description Play it
font-style Specifies the font style. Possible values:
  • normal
  • italic
  • oblique
 Play it »
font-variant Specifies the font variant. Possible values:
  • normal
  • small-caps
 Play it »
font-weight Specifies the font weight. Possible values:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Play it »
font-size/line-height Specifies the font size and the line-height, in pixels Play it »
font-family Specifies the font family Play it »
caption Use the font captioned controls (like buttons, drop-downs, etc.) Play it »
icon Use the font used to label icons Play it »
menu Use the font used in menus (drop-down menus and menu lists) Play it »
message-box Use the font used in dialog boxes Play it »
small-caption Use the font used for labeling small controls Play it »
status-bar Use the fonts used in window status bar Play it »
❮ HTML Canvas Reference