How to change the font of HTML5 Canvas using a button in Angular.js?

In this article, we are going to learn about how to change the font of HTML5 Canvas using a button in AngularJS. With the help of a click font’s property can change by the user whether it is font-size or font-style.

Syntax:

  • For font size (Change the font size accordingly):
    variable.fontSize = "100px"
  • For font style (Change the font style accordingly):
    variable.font = "Comic Sans MS"

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
      Change the font of 
      HTML5 Canvas using a button
  </title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksForGeeks
      </h1>
        <h2>
          Change the font of HTML5 Canvas using a button
      </h2>
        <input type="button" 
               value="Change the font and also the font size" 
               onclick="increaseFontSizeBy100px()">
        
        <p id="a" style="color:green">
          GeeksForGeeks
      </p>
  
        <script>
            function increaseFontSizeBy100px() {
                document.getElementById(
                    'a').style.fontSize = "100px";
                document.getElementById(
                    'a').style.font = "69px Comic Sans MS";
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:
Before:

After:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <title>
      Change the font of 
      HTML5 Canvas using a button
  </title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksForGeeks
      </h1>
        <h2>
          Change the font of HTML5 Canvas using a button
      </h2>
  
        <input type="button"
               value="Increase the font size on each click" 
               onclick="increaseFontSizeBy1px()">
        <p id="b" style="color:green">
          GeeksForGeeks
      </p>
        
        <script>
            function increaseFontSizeBy1px() {
                var id = document.getElementById('b');
                
                var style = window.getComputedStyle(
                  id, null).getPropertyValue('font-size');
                
                var currentSize = parseInt(style);
                
                currentSize++;
                
                document.getElementById(
                  'b').style.fontSize = currentSize.toString();
  
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.