How to change the font of HTML5 Canvas using a button in Angular.js?
Last Updated :
03 Jul, 2019
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:
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:
Share your thoughts in the comments
Please Login to comment...