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:
<!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
Share your thoughts in the comments
Please Login to comment...