HTML5 Canvas: Beginner Tutorial Chapter 4 - Write Text on Canvas
Tutorial by Stefan Trost | Last update on 2023-11-30 | Created on 2015-12-20
In this HTML 5 Canvas Tutorial, so far, we talked about how to integrate the Canvas element into a website, how to draw lines, rectangles, squares and circles on it and how to adjust and modify them with colors. In this part, we will see how to output some text on the HTML 5 Canvas.
- Chapter 1: Introduction and Basics
- Chapter 2: Drawing Lines
- Chapter 3: Rectangles and Circles
- Chapter 4: Write Text on Canvas
I recommend reading the first chapter of this tutorial, if you have never worked with the HTML5 Canvas before.
Writing Text on HTML5 Canvas
In this example, we can see how to write a text onto the canvas.
var canvas = document.getElementById("canv"); var context = canvas.getContext("2d"); context.font = "20px Verdana"; // Font Style context.fillText("ABC", 100, 100); // Text, x, y
For this, we need nothing more than the property font and the method fillText().
Using font, we can define which font and which font size should be used for our text.
The method fillText will then write the text onto the canvas. As a first parameter, we are passing the text, we would like to write ("ABC" in the example). As second and third parameter, we have to specify the position (here we are using the point 100/100 on the canvas).
With using strokeText() instead of fillText(), it is possible to only draw the border of the text.
Align Text
Using textAlign and textBaseline, you can align our text horizontally and vertically. Depending on how textAlign and textBaseline is set, the passed coordinates X and Y are referring to another position.
var canvas = document.getElementById("canv"); var context = canvas.getContext("2d"); context.font = "20px Verdana"; // Font Style context.textAlign = "center"; // horizontally centered context.textBaseline = "middle"; // vertically centered context.fillText("ABC", 100, 100); // Text, x, y
In this example, we are centering the text horizontal and vertical. This means, the position 100/100 should be located exactly in the middle or center of the text and the text will be written centered on this point.
Other values for textAlign are "right" and "left", adjusting the text right-justified or left-justified.
Other values for textBaseline are "top" (Y position is at the upper edge), "bottom" (Y position is at the lower edge), "alphabetic" (Y position is at the baseline) and "hanging" (Y position is at the surface).
Measure Text Width
In general, the properties textBaseline and textAlign take us from the work calculating how the text should be placed with an own calculation. Nevertheless, in some cases it is necessary to know how height or width our text is.
var canvas = document.getElementById("canv"); var context = canvas.getContext("2d"); context.font = "20px Verdana"; // Font Style var w = context.measureText("ABC").width; // Width
With using measureText().width, it is possible to determine the width of the passed text. Of course, you should take into account to set the Font Style with font before using this function, in order to ensure. By the way, the height of the text is the 20px specification in this example.
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
HTML5 Canvas: Beginner Tutorial Chapter 3 - Rectangles and Circles
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 2 - Drawing Lines
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 1 - Introduction and Basics
Tutorial | 0 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
jQuery: Send HTML5 Canvas to Server via Ajax
Tutorial | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.