HTML canvas fontProperty
Canvas ObjectExample
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 syntax used by the font property is the same as theCSS font propertysame.
| 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 weight of the font. 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 to label icons. |
| menu | Uses the font for menus (drop-down 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. |
Other Extensions