THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML canvas font Property

Canvas Object Reference Canvas Object

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

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the font property.

Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.


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 »

Canvas Object Reference Canvas Object