Easy Tutorial
❮ Met Document Createelement Prop Url Type ❯

HTML Canvas font Property

Canvas Object

Example

Write a 30-pixel text on the canvas using the "Arial" font:

JavaScript:


Browser Support

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 attributes for text content on the canvas.

The syntax for the font property is the same as the CSS font property.

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

Property Values

Value Description
font-style Specifies the font style. Possible values: normal<br> italic<br> oblique
font-variant Specifies the font variant. Possible values: normal<br> small-caps
font-weight Specifies the font weight. Possible values: normal<br> bold<br> bolder<br> lighter<br> 100<br> 200<br> 300<br> 400<br> 500<br> 600<br> 700<br> 800<br> 900
font-size/line-height Specifies the font size and line height in pixels.
font-family Specifies the font family.
caption Uses the font for caption controls (like buttons, dropdown lists, etc.).
icon Uses the font for icon labels.
menu Uses the font for menus (dropdown lists and menu lists).
message-box Uses the font for dialog boxes.
small-caption Uses the font for labeling small controls.
status-bar Uses the font for the window status bar.

Canvas Object

❮ Met Document Createelement Prop Url Type ❯