HTML canvas font attribute
Definition and Usage
font attribute sets or returns the current font attributes of the text content on the canvas.
font The syntax used for the CSS font attributeSame.
Example
Write a 40-pixel text on the canvas, using the font "Arial":
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);
Syntax
context.font="italic small-caps bold 12px arial";
Attribute value
| Value | Description |
|---|---|
| font-style |
Specify the font style. Possible values:
|
| font-variant |
Specify the font variant. Possible values:
|
| font-weight |
Specify the thickness of the font. Possible values:
|
| 900 font-size / | Specify the font size and line height, in pixels. |
| font-family | Specify the font family. |
| caption | Use the font for title controls (such as buttons, drop-down lists, etc.). |
| icon | Use the font for marking icons. |
| menu | Use the font for menus (drop-down lists and menu lists). |
| message-box | Use the font for dialog boxes. |
| small-caption | Use the font for marking small controls. |
| status-bar | Use the font for the window status bar. |
Technical Details
| Default Value: | 10px sans-serif |
|---|
Browser Support
The numbers in the table indicate the first browser version that fully supports this attribute.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
