HTML Canvas Text: How to Draw a Text, draw stocked text
Table of Contents
HTML Canvas Text: How to Draw a Text, draw stocked text?
HTML Canvas Text: steps to draw HTML Canvas Text
To draw text on an HTML canvas, you can follow these steps:
1-Get the 2D rendering context of the canvas using getContext(“2d”).
2-Set the font style using the font property of the rendering context. For example: ctx.font = “bold 24px Arial”.
3-Set the text alignment using the textAlign property of the rendering context. For example: ctx.textAlign = “center”.
4-Set the text baseline using the textBaseline property of the rendering context. For example: ctx.textBaseline = “middle”.
5-Set the fill or stroke style using the fillStyle or strokeStyle property of the rendering context.
6-Use the fillText(text, x, y) or strokeText(text, x, y) methods of the rendering context to draw the text. Provide the text content and the coordinates (x, y) where you want the text to be positioned.
Here’s an example that demonstrates how to draw text on an HTML canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Get the canvas element and the 2D rendering context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Set font style
ctx.font = "bold 24px Arial";
// Set text alignment
ctx.textAlign = "center";
// Set text baseline
ctx.textBaseline = "middle";
// Set fill style
ctx.fillStyle = "blue";
// Draw filled text
ctx.fillText("Gogo, Rabei!", canvas.width / 2, canvas.height / 2);
// Set stroke style
ctx.strokeStyle = "red";
// Draw stroked text
ctx.strokeText("Gogo, Rabei!", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>
In this example:
1- we create a canvas with a width of 400 pixels and a height of 200 pixels. We get the 2D rendering context of the canvas using getContext(“2d”).
2-We set the font style using ctx.font. In this case, we set it to “bold 24px Arial”.
3-We set the text alignment using ctx.textAlign. Here, we set it to “center” to align the text in the horizontal center of the canvas.
4-We set the text baseline using ctx.textBaseline. In this example, we set it to “middle” to align the text vertically in the middle of the canvas.
5-We set the fill style using ctx.fillStyle. Here, we set it to “blue” to fill the text with blue color.
6-We use ctx.fillText to draw filled text, providing the text content and the coordinates (canvas.width / 2, canvas.height / 2) for the center position.
7-Similarly, we set the stroke style using ctx.strokeStyle. Here, we set it to “red” to stroke the text with a red color.
8-We use ctx.strokeText to draw stroked text, providing the text content and the same coordinates as before.
When you run this code, you will see the text “Hello, World!” centered on the canvas, filled with blue color and stroked with red color.
Using fillText()
Here’s an example that demonstrates how to use the fillText() method to draw filled text on an HTML canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas fillText() Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Get the canvas element and the 2D rendering context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Set font style
ctx.font = "bold 24px Arial";
// Set text alignment
ctx.textAlign = "center";
// Set text baseline
ctx.textBaseline = "middle";
// Set fill style
ctx.fillStyle = "blue";
// Draw filled text
ctx.fillText("Hello, World!", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>
In this example:
1- we create a canvas with a width of 400 pixels and a height of 200 pixels. We get the 2D rendering context of the canvas using getContext(“2d”).
2-We set the font style using ctx.font. In this case, we set it to “bold 24px Arial”.
3-We set the text alignment using ctx.textAlign. Here, we set it to “center” to align the text in the horizontal center of the canvas.
4-We set the text baseline using ctx.textBaseline. In this example, we set it to “middle” to align the text vertically in the middle of the canvas.
5-We set the fill style using ctx.fillStyle. Here, we set it to “blue” to fill the text with blue color.
6-Finally, we use the ctx.fillText(text, x, y) method to draw the filled text. We provide the text content as the first argument (“Hello, World!”), and the coordinates (canvas.width / 2, canvas.height / 2) as the second and third arguments to position the text in the center of the canvas.
When you run this code, you will see the text “Hello, World!” centered on the canvas, filled with blue color.
Using strokeText()
Here’s an example that demonstrates how to use the strokeText() method to draw stroked text on an HTML canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas strokeText() Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Get the canvas element and the 2D rendering context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Set font style
ctx.font = "bold 24px Arial";
// Set text alignment
ctx.textAlign = "center";
// Set text baseline
ctx.textBaseline = "middle";
// Set stroke style
ctx.strokeStyle = "red";
// Draw stroked text
ctx.strokeText("Hello, World!", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>
In this example:
1- we create a canvas with a width of 400 pixels and a height of 200 pixels. We get the 2D rendering context of the canvas using getContext(“2d”).
2-We set the font style using ctx.font. In this case, we set it to “bold 24px Arial”.
3-We set the text alignment using ctx.textAlign. Here, we set it to “center” to align the text in the horizontal center of the canvas.
4-We set the text baseline using ctx.textBaseline. In this example, we set it to “middle” to align the text vertically in the middle of the canvas.
5-We set the stroke style using ctx.strokeStyle. Here, we set it to “red” to stroke the text with a red color.
6-Finally, we use the ctx.strokeText(text, x, y) method to draw the stroked text. We provide the text content as the first argument (“Hello, World!”), and the coordinates (canvas.width / 2, canvas.height / 2) as the second and third arguments to position the text in the center of the canvas.
When you run this code, you will see the text “Hello, World!” centered on the canvas, stroked with a red color.
Add Color and Center Text
Here’s an example that demonstrates how to add color to the text and center it on an HTML canvas:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Text Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
// Get the canvas element and the 2D rendering context
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Set font style
ctx.font = "bold 24px Arial";
// Set text alignment
ctx.textAlign = "center";
// Set text baseline
ctx.textBaseline = "middle";
// Set fill style
ctx.fillStyle = "blue";
// Set stroke style
ctx.strokeStyle = "red";
// Draw filled text
ctx.fillText("Hello, World!", canvas.width / 2, canvas.height / 2);
// Draw stroked text
ctx.strokeText("Hello, World!", canvas.width / 2, canvas.height / 2);
</script>
</body>
</html>
In this example:
1-we create a canvas with a width of 400 pixels and a height of 200 pixels. We get the 2D rendering context of the canvas using getContext(“2d”).
2-We set the font style using ctx.font. In this case, we set it to “bold 24px Arial”.
3-We set the text alignment using ctx.textAlign. Here, we set it to “center” to align the text in the horizontal center of the canvas.
4-We set the text baseline using ctx.textBaseline. In this example, we set it to “middle” to align the text vertically in the middle of the canvas.
5-We set the fill style using ctx.fillStyle. Here, we set it to “blue” to fill the text with blue color.
6-We set the stroke style using ctx.strokeStyle. Here, we set it to “red” to stroke the text with a red color.
7-Finally, we use the ctx.fillText(text, x, y) method to draw the filled text and ctx.strokeText(text, x, y) to draw the stroked text. We provide the text content as the first argument (“Hello, World!”), and the coordinates (canvas.width / 2, canvas.height / 2) as the second and third arguments to position the text in the center of the canvas.
When you run this code, you will see the text “Hello, World!” centered on the canvas, filled with blue color and stroked with red color.
