(click anywhere to close)
OPEN MENU

[Canvas] Text

category: Website | course: Canvas | difficulty:

Because HTML and CSS provide lots of ways to easily display and customize text, you might think you could just overlay your canvas with another element if you want text displayed there. This is true, and might sometimes be a good method, but using native text methods within the canvas is often much easier. They can be positioned exactly at the right spot, and styled by setting the right properties.

Displaying Text

To display the phrase text at position (x,y), use

fillText(text, x, y)

The default colour for text is, as always, black, and the default font the same as the default font for CSS.

ctx.fillText("Hello Whale!", 10, 10);

Styling Text

If you want to style this text, you need to set a few properties before you call the fillText() method. Just as everything else, text is considered a shape, which means the colour can be determined with the fillStyle property. Similarly, the text can be stroked using the properties and methods you’ve already learned.

Font Family & Size

Both the font and its display size are set with the same property:

font = “size font-family

ctx.font = "36pt Calibri";
ctx.fillText("Hello Whale!", 10, 50);

Aligning Text Horizontally

To align the text, use:

textAlign = value

The possible values are: left, center and right. Additionally, if your document uses a specified text direction you can use start and end to refer to the start and end of lines. For instance, if your document uses rtl (for right-to-left), the start of the line actually means aligning it to the right.

ctx.textAlign = "right";

ctx.font = "36pt Calibri";
ctx.fillText("Hello Whale!", 10, 50);

Aligning Text Vertically

To align the text horizontally, we change where the baseline is located. The baseline is, normally, the imaginary line that all letters sit on, and used for the y-position of the text. The syntax is:

textBaseline = value

The possible values are best displayed with a picture:

CanvasTextBaselines
ctx.font = "36pt Calibri";
ctx.fillText("Hello", 10, 50);

ctx.textBaseline = "bottom";

ctx.fillText("Whale!", 120,50);

Text Wrapping & Metrics

What’s important to notice, is that text within the canvas doesn’t naturally wrap – you can’t set a width, which means text will extend horizontally, infinitely.

If you want to measure the current width of text, use

measureText(text).width

At the time of writing this method only returns width, but there are plans to make it calculate more than that.

This width can then, for example, be used to create a custom function that enables text wrapping.

	/** @param ctx (Context we're drawing in)
		@param text (The text to wrap)
		@param x (x-position to place the text block)
		@param y (y-position to place the text block)
		@param maxWidth (Maximum length of a line, in pixels)
		@param lineHeight (height of one line)
	*/
function wrapText(ctx, text, x, y, maxWidth, lineHeight) {
    var words = text.split(' ');
    var line = '';

    for(var n = 0; n < words.length; n++) {
      var testLine = line + words[n] + ' ';
      var metrics = ctx.measureText(testLine);
      var testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        ctx.fillText(line, x, y);
        line = words[n] + ' ';
        y += lineHeight;
      }
      else {
        line = testLine;
      }
    }
    ctx.fillText(line, x, y);
}

wrapText(ctx,"This is a very long sentence trying to showcase a function designed to wrap text.",10,10,80,16);
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)