Skip to content
Related Articles

Related Articles

Improve Article

HTML | canvas font Property

  • Last Updated : 21 Jun, 2019
Geek Week

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

Syntax:

  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.

Example:




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

Output:

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

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up