Open In App

HTML canvas font Property

Last Updated : 12 Jun, 2023
Like Article

The HTML canvas font Property is used to change the present font family of the Text content of the <canvas> element. The font Property has a Default Property i.e 10px sans-serif


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

Property Values:

  • font-family: It is used to set the font type of an HTML element. It holds several font names as a fallback
  • font-style: It is used to specify the font style of an HTML element. It can be “normal, italic or oblique”.
  • font-weight: It is used to set the boldness of the font. Its value can be “normal, bold, lighter, bolder”.
  • font-variant: It is used to create the small-caps effect. It can be “normal or small-caps”.
  • font-size: It is used to set the font size of an HTML element. The font-size can be set in different ways like in “pixels, percentage, em or we can set values like small, large” etc.
  • caption: Use the font captioned controls (like buttons, drop-downs etc.)
  • icon: Use the font used to label icons.
  • menu: Use the font used in menus (drop-down menu and menu lists).
  • message-box: Use the font used in dialog boxes.
  • small-caption: Use the font used for labeling small controls
  • status-bar: Use the fonts used in window status bar.


<!DOCTYPE html>
      HTML canvas font Property
<body style="text-align:center">
    <h1 style="color:green">
    <h2 style="color:green">
      HTML canvas font Property
    <canvas id="sudo" 
            style="border:2px solid">
        var c = document.getElementById("sudo");
        var ctx = c.getContext("2d");
        ctx.font = "40px Arial";
        ctx.fillText("GeeksForGeeks", 10, 50);


Supported Browsers: The browsers supported by HTML canvas font Property are listed below:

  • Google Chrome
  • Internet Explorer 9.0
  • Firefox
  • Apple Safari
  • Opera

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads