Canvas font Property

❮ Canvas Reference

Example

Write a 30px high text on the canvas, using the font "Arial":

YourbrowserdoesnotsupporttheHTML5canvastag.

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 front 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
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.