How to change the font of HTML5 Canvas using a button in Angular.js? Last Updated : 03 Jul, 2019 Comments Improve Suggest changes Like Article Like 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: 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: Comment More infoAdvertise with us Next Article How to change the font of HTML5 Canvas using a button in Angular.js? S SohomPramanick Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads How to change the button color after clicking it using AngularJS ? Created an HTML button and the task is to change the background color of the button when pressing it with the help of AngularJS. This task can be accomplished using the ng-click directive that helps to toggle the display of the content when the button or any specific HTML element is clicked. Here, t 2 min read How to change the font size of a text canvas using Fabric.js ? In this article, we are going to see how to change the font size of a text canvas using FabricJS. The text canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox. Approach: To make it possible we are going to use a 2 min read How to change font-family of a text canvas using Fabric.js ? In this article, we are going to see how to change the font-family of a text canvas using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.To make it possible we are going to use a JavaScript li 2 min read How to change the font style of a text canvas using Fabric.js ? In this article, we are going to see how to change the font style of a text canvas using FabricJS. The canvas means text written is movable and can be stretched according to the requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use a 2 min read How to change border-color of a canvas text using Fabric.js ? In this article, we are going to see how to change the border-color of a canvas-like text using FabricJS. The canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox.Approach: To make it possible we are going to use 2 min read Like