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:

html

<!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>

Output: Before:

After:

Example 2:

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="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>

Output:

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

Explore