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:
<!DOCTYPE html> < html > < head > < title > Change the font of HTML5 Canvas using a button </ title > </ head > < body > < center > < h1 style = "color:green" > w3wiki </ 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" > w3wiki </ 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" > w3wiki </ 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" > w3wiki </ 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:
Contact Us