Open In App

HTML canvas font Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 12 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads