HTML5 Canvas

HTML5 Canvas: Text

HTML5 Canvas: Text

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.

HTML5 Canvas filled text

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.

View markup
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:

  1. Font weight and/or variant
  2. Font size
  3. Font name

The fillText context should contain the following:

  1. Text string (in quotes)
  2. X position on Canvas (from left)
  3. Y position on Canvas (from top)

Bold filled text

HTML5 Canvas 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.

View markup
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

HTML5 Canvas 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.

View markup
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

HTML5 Canvas 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).

View markup
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:

  1. Left
  2. Center
  3. Right
  4. Start: The start of the text is placed in the specified X/Y position
  5. End: The end of the text is placed in the specified X/Y position

Centre aligned text

HTML5 Canvas 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.

View markup
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

HTML5 Canvas 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.

View markup
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”

HTML5 Canvas 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.

View markup
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”

HTML5 Canvas 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.

View markup
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

HTML5 Canvas top vertical alignment

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.

View markup
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:

  1. Top
  2. Hanging
  3. Middle
  4. Alphabetic
  5. Ideographic
  6. 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

HTML5 Canvas middle vertical alignment

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.

View markup
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

HTML5 Canvas bottom aligned text

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.

View markup
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>