X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML canvas font Property

HTML canvas Reference 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

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 »


HTML canvas Reference HTML Canvas Reference

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook