Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Properties to create text using HTML5 Canvas
The HTML5 canvas element enables dynamic, scriptable display of bitmap images and 2D forms. A bitmap is updated using a low level procedural model. 2D game development is also aided by HTML5 Canvas.
The HTML <canvas> element is used to draw graphics on a web page.
Let’s dive into the article for learning more about creating text using HTML5 canvas.
Create text using HTML5 Canvas
Use the fillText() or strokeText() methods, or a mix of the two, to add text on the HTML "canvas" element. You can provide a variety of text settings, including style, weight, size, and font, using the font property (type: string). Italic, bold, or standard font styles are available. Normal style is the default.
Let’s look one by one to understand more clearly about creating text using HTML5 canvas.
Using the fillText() Method
Using the current fill style and font, the fillText() function renders filled text onto the canvas.
Syntax
Following is the syntax for fillText() method.
ctx.fillText(text, x, y, maxWidth)
let’s look into the following example.
Example
In the following example we are adding a text on the <canvas> element with the fillText() method.
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background: #82E0AA ;
width: 250;
height: 150;
}
</style>
</head>
<body>
<canvas id="tutorial"></canvas>
<script>
var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");
context.fillStyle = "#DFFF00";
context.font = "bold 18px veranda";
context.fillText("Tutorialspoint", (tutorial.width / 2) - 17, (tutorial.height / 2) + 8);
</script>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of a canvas drawn on the webpage along with the text written on the canvas obtained by using the fillText() method.
Example
Let’s look into the another example where we are using filltext() method with linear gradient.
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial" width="300" height="100"></canvas>
<script>
var canvas = document.getElementById("tutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0.3", "#DE3163");
gradient.addColorStop("0.3", "#45B39D");
ctx.font = "italic 700 25px Unknown Font, sans-serif";
ctx.fillStyle = gradient;
for (var i = 0; i < 75; i +=30 )
{
ctx.fillText("HELLO", i, i);
}
}
</script>
</body>
</html>
Output
On running the above script, it will generate an output displaying a text drawn on the canvas using fillText() applied with a linear gradient on the webpage.
Using the strokeText() Method
The current font, lineWidth, and strokeStyle properties are used in conjunction with the strokeText() method to produce the provided text at the specified place.
Syntax
Following is the syntax for strokeText() method
ctx.strokeText(text, x, y, maxWidth);
let’s look into the following example.
Example
Considering the following example, we are adding a text on the <canvas> element with the strokeText() method.
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background: #E5E7E9 ;
}
</style>
</head>
<body>
<canvas id="tutorial" width="250" height="100"></canvas>
<script>
var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");
context.font = "bold 30px Arial";
context.strokeText("Welcome", 50, 50);
</script>
</body>
</html>
Output
On running the above script, the output window will pop up, displaying the canvas drawn on the webpage along with the text filled inside the canvas using the strokeText() method.
133 Views
