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:

html

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

HTML canvas font Property

Explore