In this part of HML canvas tutorial, we will learn to draw text on Canvas. Drawing text on html5 canvas is easy and you have the option to define the font properties just as you define in CSS. But as you know, HTML canvas is an image and hence the text drawn in a canvas is not selectable. If you wish to place text in the canvas drawings, you can use an HTML element and place it above the canvas with CSS positioning. However, the only negative aspect of putting the text above canvas element is that if your user downloads the image created by canvas, this text will not be there. So, the choice is yours to use either of the two methods.
Here, we will focus on the first method, i.e. drawing text inside the canvas. To draw text on canvas, we use the following method:
fillText(text, x, y)
There is nothing difficult here:
text – Any string you wish to display in your canvas
x, y – Co-ordinates of the starting point of text
So, let’s begin by drawing “Hello, World” in canvas. I will use the same canvas which we have created in earlier sections. If you have not already, you can go through the previous series of this HTML5 Tutorial on Canvas:
- HTML5 Canvas Basics
- Drawing Shapes on Canvas
- Circle, Arcs & Curves on Canvas
- Applying colors and styles
Well, as you can see “Hello, World!” here, but the font size is really small. By default, the font size in the canvas is 10px and the font-family is sans-serif which makes it really small. But don’t worry; we can easily define the font-size in canvas through font property. See the example below.
Add this above the line which we have used to draw the text. Perfect, now our text looks cool. Try to select this text; you will not be able to, because it is an image. So, the learning here is – If you wish to display only text, never use canvas element, because it is not SEO friendly!
Similar to CSS, you can make the text bold or italic by defining it in the ‘font’ method. By default, it is set to normal.
ctx.font = “bold 30px Tahoma”;
You may notice that the method to draw text is fillText which is similar to other methods to draw shapes like fillRect and fillArc. So you may be thinking, “is there anything like strokeText also”? Yes, there is and you can use it to draw text just with the strokes.
ctx.font = “bold 30px Tahoma”;
ctx.strokeText(“Hello, World!”, 50, 50);
You may like to be creative and use strokeText method along with shadow and transform to create cool effects.
You can place the text anywhere in the canvas by defining the co-ordinates. But you get more flexibility with “textAlign” property. The possible values for this property are start, end, left, right, and center. By default, textAlign value is set to start meaning the text will start from the defined co-ordinate. If you change the textAlign value to end, it means that the text will end at that point. Similarly, center will mean that the center point of the text will be located at the defined co-ordinates.
Try by using different values; I see no difference between start and left values and end and right values. You can use them interchangeably. See the following example:
ctx.font="30px Tahoma"; ctx.textAlign="start"; ctx.fillText("textAlign=start",200,50); ctx.textAlign="end"; ctx.fillText("textAlign=end",200,100); ctx.textAlign="left"; ctx.fillText("textAlign=left",200,150); ctx.textAlign="center"; ctx.fillText("textAlign=center",200,200); ctx.textAlign="right"; ctx.fillText("textAlign=right",200,250);
So, this was all about the font and text in HTML5 canvas.
In this five parts series of HTML5 canvas tutorial, we have covered everything you need for a solid start. This tutorial is intended for beginners who have never worked with HTML5 before. You know now the basics of HTML5 canvas and can draw shapes including circles, arcs and curves. You also know how to fill color in the canvas shapes and write text inside it. These are sufficient for your basic requirements. Do some cool stuff and create some nice drawings. However, if you are looking for more, there is still a lot to learn. For learning some advance functionalities like translations, animations and compositing; I will recommend you to check out Mozilla Developer Network.