Text can be added to a Canvas element. Text within a Canvas can’t be controlled a huge amount, but we’ll discover here what can be achieved.
Text styles
Filled text
Like any other shape within a Canvas, text can be filled with a colour or have an outline stroke applied to it (or both). In this case, I’m going to fill the text with the default colour of black.
View demo
The markup
To add text, I add the font name and size to the font context, and the string of text along with X and Y position on the Canvas as parameters to the fillText context.
Javascript portion
function draw() {
// Filled text
var canvas = document.getElementById("textFilled");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillText("This is text within a canvas", 5, 50);
}
}
HTML portion
<body onLoad="draw();"> <canvas id="textFilled" width="660" height="70"></canvas> </body>
The font context can contain a string of the following:
- Font weight and/or variant
- Font size
- Font name
The fillText context should contain the following:
- Text string (in quotes)
- X position on Canvas (from left)
- Y position on Canvas (from top)
Bold filled text
View demo
The markup
In this example, I’m just adding an additional value to the font context of bold to change the weight of the text.
Javascript portion
function draw() {
// Filled bold text
var canvas = document.getElementById("textFilledBold");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "bold 50px Arial";
ctx.fillText("This is text within a canvas", 5, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textFilledBold" width="660" height="70"></canvas>
</body>
Outlined text
View demo
The markup
In this next example, instead of adding a fill to the text, I’m going to be giving it an outline, so I just have to swap out the fillText context for strokeText to achieve this.
Javascript portion
function draw() {
// Outlined text
var canvas = document.getElementById("textOutlined");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeText("This is text within a canvas", 5, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textOutlined" width="660" height="70"></canvas>
</body>
Horizontal alignment
Left aligned text
View demo
The markup
To align the text how I would like, I add in the textAlign context, and the X and Y values of the fillText or strokeText context are also taken into account. So, for the left aligned example,The text flows left from that X/Y value specified (in this case, 5 pixels from the left and 50 pixels from the top).
Javascript portion
function draw() {
// Left aligned text
var canvas = document.getElementById("textAlignLeft");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textAlign = "left";
ctx.fillText("This is left aligned text", 5, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignLeft" width="660" height="70"></canvas>
</body>
The textAlign context can have one of the following as the value, which I’ll go on to explore next:
- Left
- Center
- Right
- Start: The start of the text is placed in the specified X/Y position
- End: The end of the text is placed in the specified X/Y position
Centre aligned text
View demo
The markup
When the text is aligned centrally, remember that the X and Y values are taken into account, so as I want to align the text to roughly the centre of this Canvas, which is 660 pixels wide and 70 pixels high, I sent the X and Y values of fillText to 330 and 50 respectively, and the text aligns itself centrally upon that point.
Javascript portion
function draw() {
// Centre aligned text
var canvas = document.getElementById("textAlignCentre");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textAlign = "center";
ctx.fillText("This is centre aligned text", 330, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignCentre" width="660" height="70"></canvas>
</body>
Right aligned text
View demo
The markup
Aligning the text to the right of the Canvas requires the X value set in fillStyle to be set to the width of the Canvas (in this example, 660), and the text aligns to the right of this point.
Javascript portion
function draw() {
// Right aligned text
var canvas = document.getElementById("textAlignRight");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textAlign = "right";
ctx.fillText("This is right aligned text", 660, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignRight" width="660" height="70"></canvas>
</body>
textAlign = “start”
View demo
The markup
If textAlign is set to start, the text string begins at the set X/Y position within fillText. In this example, is has been set to the centre of the Canvas, so the text starts there.
Javascript portion
function draw() {
// textAlign = "start"
var canvas = document.getElementById("textAlignStart");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textAlign = "start";
ctx.fillText("textAlign = start", 330, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignStart" width="660" height="70"></canvas>
</body>
textAlign = “end”
View demo
The markup
Very similar to textAlign = "start", the end of the text string ends up at the set X/Y position set as values in fillText. Again, the position has been set to the centre of the Canvas, so the text string finishes there.
Javascript portion
function draw() {
// textAlign = "end"
var canvas = document.getElementById("textAlignEnd");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textAlign = "end";
ctx.fillText("textAlign = end", 330, 50);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignEnd" width="660" height="70"></canvas>
</body>
Vertical alignment
Text can also be aligned vertically by using the textBaseline context.
Top
View demo
The markup
When I set textBaseline, as in the other examples above of horizontal alignment, I have to set the X/Y position on fillText to position the text how I want it. So in this case I want to position the text near the top of the Canvas, so I set the textBaseline context to top and the Y value to 5.
Javascript portion
function draw() {
// Top aligned text
var canvas = document.getElementById("textAlignTop");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textBaseline = "top";
ctx.fillText("Top aligned text", 5, 5);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignTop" width="660" height="70"></canvas>
</body>
Other options for textBaseline are as follows:
- Top
- Hanging
- Middle
- Alphabetic
- Ideographic
- Bottom
The top, middle and bottom options are enough to position English characters, so I shall only be covering these below; hanging, alphabetic and ideographic can be used to position unicode characters.
Middle
View demo
The markup
I want to place the text in the vertical centre of the Canvas, so set textBaseline to middle, and, as the height of this Canvas is 70 pixels, set the Y value on fillText to 35.
Javascript portion
function draw() {
// Middle aligned text
var canvas = document.getElementById("textAlignMiddle");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textBaseline = "middle";
ctx.fillText("Middle aligned text", 5, 35);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignMiddle" width="660" height="70"></canvas>
</body>
Bottom
View demo
The markup
For the last one, I want to position the text near the bottom of the Canvas, so I set textBaseline to bottom and the Y value on fillText to 65.
Javascript portion
function draw() {
// Bottom aligned text
var canvas = document.getElementById("textAlignBottom");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font = "40px Arial";
ctx.textBaseline = "bottom";
ctx.fillText("Bottom aligned text", 5, 65);
}
}
HTML portion
<body onLoad="draw();">
<canvas id="textAlignBottom" width="660" height="70"></canvas>
</body>