How to change the font of HTML5 Canvas using a button in Angular.js? Last Updated : 03 Jul, 2019 Summarize Comments Improve Suggest changes Share 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 button color after clicking it using AngularJS ? 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 How to change font-weight of a canvas-type text using Fabric.js? One can change the font-weight of a canvas-type using Fabric.js which adds versatility and style to the web applications and graphic design. It provides an efficient method to manipulate text properties such as font weight dynamically, which enhances the presentation and readability of the text elem 3 min read Like