Canvas font Property
Example
Write a 30px high text on the canvas, using the font "Arial":
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Try it Yourself »
Description
The font property sets or returns the font properties for canvas text.
The font property uses the same syntax as the CSS font property.
The default value is 10px sans-serif.
Se Also:
The fillStyle Property (Set text color/gradient)
The textAlign Property (Set text alignment)
The textBaseline Property (Set text baseline)
The fillText() Method (Draw the text)
The strokeText() Method (Draw the text)
Syntax
| context.font = "italic small-caps bold 12px arial" |
Property Values
| Values | Description | Play it |
|---|---|---|
| font-style |
|
Play it » |
| font-variant |
|
Play it » |
| font-weight |
|
Play it » |
| font-size | The font size in pixels | Play it » |
| font-family | The font family | Play it » |
| caption | Use the font used in buttons | Play it » |
| icon | Use the font used to label icons | Play it » |
| menu | Use the font used in menus | Play it » |
| message-box | Use the font used in dialog boxes | Play it » |
| small-caption | Use the font used for labeling small controls | Play it » |
| status-bar | Use the fonts used in window status bar | Play it » |
Browser Support
The <canvas> element is an HTML5 standard (2014).
font is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
