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.
See 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