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	normal italic oblique	Play it »
font-variant	normal small-caps	Play it »
font-weight	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	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