HTML | canvas font Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.