HTML canvas font Property
Example
// Accessing the element
let c = document.getElementById("myCanvas");
// Styling canvas
let ctx = c.getContext("2d");
ctx.font = "20px monaco";
ctx.fillText("Hello World!", 5, 75);
Meaning
The font canvas property sets or returns the current font properties for text content.
Standard Syntax
Default value:
10px sans-serif
JavaScript syntax:
context.font="font-style font-variant font-weight font-size/line-height font-family etc.";
Advertisement
Property Values
| Value | Description |
|---|---|
| font-style | Specifies the font style.
Possible values:
|
| font-variant | Specifies the font variant.
Possible values:
|
| font-weight | Specifies the font weight.
Possible values:
|
| font-size/line-height | Specifies the font size and the line-height, in pixels. |
| font-family | Specifies the font family. |
| caption | Use the font captioned controls (like buttons, drop-downs, etc.) |
| icon | Use the font used to label icons. |
| menu | Use the font used in menus (drop-down menus and menu lists). |
| message-box | Use the font used in dialog boxes. |
| small-caption | Use the font used for labeling small controls |
| status-bar | Use the fonts used in window status bar. |