Canvas font attribute

Canvas Reference Manual

Definition and usage

font Attribute sets or returns the current font attribute of the text content on the canvas.

font The syntax of the attribute used is the same as CSS font AttributeSame.

Example

Write a 40-pixel text on the canvas, using the font "Arial":

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);

Try it yourself

Syntax

context.font="italic small-caps bold 12px arial";

Attribute value

Value Description
font-style

Specify the font style. Possible values:

  • normal
  • italic
  • oblique
font-variant

Specify the font variant. Possible values:

  • normal
  • small-caps
font-weight

Specify the thickness of the font. Possible values:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height 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.

Canvas Reference Manual