HTML canvas fontProperty
Example
Write a 30-pixel text on the canvas, using the font "Arial":
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Try it Yourself »
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 properties of the text content on the canvas.
The font property uses the same syntax as theCSS 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:
|
| 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 line height, in pixels. |
| font-family | Specifies the font family. |
| caption | Uses the font for caption controls (such as buttons, drop-down lists, etc.). |
| icon | Uses the font used for labeling icons. |
| menu | Uses the font used in menus (drop-down lists and menu lists). |
| message-box | Uses the font used in dialog boxes. |
| small-caption | Uses the font used for labeling small controls. |
| status-bar | Uses the font used in the window status bar. |
HTML canvas Reference Manual Other Extensions