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: