html tutorial - font Property in HTML5 Canvas - html5 - html code - html form
Learn html - html tutorial - Font property in html5 canvas - html examples - html programs
- The font property is one of the canvas property.
- The font property is used to sets or returns the current font properties for text content on the canvas.
- The font property has similar syntax as the css font property.
Syntax for font Property in HTML5 Canvas:
Property values for font Property in HTML5 Canvas:
Values | Description |
---|---|
font-style | Specifies the font style: normal italic oblique |
font-variant | Specifies the font variant: Normal small-caps |
font-weight | Specifies the font weight: normal bold bolder lighter |
font-size/line-height | Specifies the font size and the line-height, in pixels |
font-family | Specifies the font family |
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 menus 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 |
Sample Coding for font Property in HTML5 Canvas:
Code Explanation for font Property in HTML5 Canvas:
- “Wikitechy canvas” is used to declare the id value of the canvas tag.
- getElementById() method is used to draw the element from id.
- getContext() returns an object that provides methods and properties for canvas element.
- font property is used to set the font level is 50px and set the font as Times New Roman.
- The fillText() method is used to filled text ("welcome to wikitechy.com", 50, 100) on the canvas in (x,y) axis.
Output for font Property in HTML5 Canvas:
- canvas is used to draw a rectangle an font property.
- The output was displayed by “50px Times New Roman” font of the given element.
Browser Support for font Property in HTML5 Canvas:
Yes | 9.0 | Yes | Yes | Yes |