HTML Canvas Text
Last Updated :
30 Nov, 2023
The HTML Canvas Text facilitates the two different methods the fillText() method and the strokeText() method to draw text on canvas. The property font is used to define the size of the font and the font style.
To add color to the filled text, the fillStyle property is used while the strokeStyle property is used to color the outline of the stroke text. By default the color of the stroke is black.
There are 2 methods to draw the text on the HTML Canvas:
We will explore both methods, their syntax & parameters & understand them with the help of basic examples.
fillText() Method
The fillText() method in HTML Canvas is used to draw filled text on the canvas.
Syntax
context.fillText(text, x, y);
Parameters
- text: The string you want to draw on canvas.
- x: The x-axis coordinate of the point to the start draws the text, the value is in pixels.
- y: The y-axis coordinate of the point to the start draws the text, the value is in pixels.
Example 1: In this example, we will see how to draw Text on Canvas with the help of HTML and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Text</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<p id="gfg">
GeeksforGeeks
</p>
<h1 id="title-text">
HTML Canvas Text
</h1>
<canvas width="250"
height="200"
class="canvasclass"
id="canvasid">
</canvas>
<script src="script1.js"></script>
</body>
</html>
|
CSS
@import url(
body {
font-family: 'Poppins', sans-serif;
}
#gfg {
font-size: 49px;
color: green;
}
#canvasid {
border: 2px solid black;
}
|
Javascript
const canvaselement =
document.getElementById("canvasid").getContext("2d")
canvaselement.font = "30px Poppins";
canvaselement.fillStyle = "red";
canvaselement.fillText("GeeksforGeeks", 10, 100)
|
Output:
Â
strokeText() Method
The strokeText() method in HTML Canvas outlines text, allowing us to customize the font, size, and color.
Syntax
context.strokeText(text, x, y);
Parameters
- text: The string you want to draw on canvas.
- x: The x-axis coordinate of the point to the start draws the text, the value is in pixels.
- y: The y-axis coordinate of the point to the start draws the text, the value is in pixels.
Example 2: In this example, we will see how to draw Text on Canvas with the help of HTML and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Canvas Text</title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<p id="gfg">GeeksforGeeks</p>
<h1 id="title-text">
HTML Canvas Text
</h1>
<canvas width="250"
height="200"
class="canvasclass"
id="canvasid">
</canvas>
<script src="script1.js"></script>
</body>
</html>
|
CSS
body {
font-family: 'Poppins', sans-serif;
}
#gfg {
font-size: 49px;
color: green;
}
#canvasid {
border: 2px solid black;
}
|
Javascript
const canvaselement =
document.getElementById("canvasid").getContext("2d")
canvaselement.font = "30px Poppins";
canvaselement.strokeText("GeeksforGeeks", 10, 100)
|
Output:
Â
Share your thoughts in the comments
Please Login to comment...