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