Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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:




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



Last Updated : 03 Jul, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads