html tutorial - font Property in HTML5 Canvas - html5 - html code - html form



Font property in html5 canvas

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:

context.font="italic small-caps bold 12px Times New Roman";

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:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>wikitechy-HTML canvas font</title>
    </head>
    <body>
        <h1>wikitechy-HTML canvas font with example:</h1>
        <canvas id="wikitechyCanvas" width="400" height="200" 
            style="border:1px solid #d3d3d3;">
        </canvas>
        <script>
            var g = document.getElementById("wikitechyCanvas");
            var asd= g.getContext("2d");
            asd.font = "50px Times New Roman";
            asd.fillText("welcome to wikitechy.com", 50, 100);
        </script>
    </body>
</html>

Code Explanation for font Property in HTML5 Canvas:

font Property in HTML5 canvas Code Explanation

  1. “Wikitechy canvas” is used to declare the id value of the canvas tag.
  2. getElementById() method is used to draw the element from id.
  3. getContext() returns an object that provides methods and properties for canvas element.
  4. font property is used to set the font level is 50px and set the font as Times New Roman.
  5. 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:

font Property in HTML5 canvas Output

  1. canvas is used to draw a rectangle an font property.
  2. 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

Related Searches to font Property in HTML5 Canvas