Approaches to adding text to canvas

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

HTML Canvas – Adding Text

We have seen how to draw shapes as well as style them inside the Canvas element. We will now have a look at how to draw text in the Canvas element.

To render text on the Canvas element, there are two methods available and are listed in the below table.

fillText(text, x, y, maximum_width)

When this method is used, the given text is inserted into the Canvas at position (x, y) and is filled. We can leave the maximum width parameter without assigning a value (or) give a value to draw text with the given width.

strokeText (text, x, y, maximum_idth)

This method draws stroked text at the given position (x, y) inside the Canvas element. We can also give a width parameter to draw for the text or leave it where default size is considered.

Example

Let us use font property to draw the text by the text drawing methods to understand it clearly. The following code demonstrates how text is drawn on the Canvas using the available methods.

    body  function text()  

Output

The output for the following code is

Styling text

We can style the text drawn on Canvas using the styling properties. We have already seen the font property in the above example. Four properties can be used to style text on Canvas and each of them is listed in the below table.

The text size and font style are set using this property. The default value is 10px size and font style is sans-serif. The text size is taken in pixels and the font style is taken in string. If there is any error in initializing, the font property given is ignored.

This property can be used to set the position of text in Canvas. The default position of the text is ‘start’. It only changes horizontal alignment.

‘start’, ’end’, ‘left’, ‘right’, ‘center’.

textBaseline

This property is used to alter the baseline alignment of the canvas text. The default value is ‘alphabetic’. It sets the vertical alignment of the text.

‘top’, ‘hanging’, ‘middle’, ‘alphabetic’, ‘ideographic’, ‘bottom’.

It sets the directionality for the Canvas text. The default value is ‘inherit’.

‘ltr’, ‘rtl’, ‘inherit’.

Example 1

Following example demonstrates font and textAlign properties of text in HTML5 Canvas.

    body  function text()  

Output

The following code returns output as

Example 2

Following code implements textBaseline property for all the available values.

    body  function text()  

Output

The output for the following code is

Example 3

We will demonstrate text direction in the following example. The implementation code is given below.

       body  function text()  

Output

The output for the following code is

Measuring text

This method is used to obtain more details about the text. It allows us to measure the text. The method used to achieve this is measureText(‘text_string’) – This method returns a text object containing the width of input text in pixels when drawn as the current style given.

Example

Following code demonstrates the measureText() method. The implementation is given below.

    body  function text()  

Output

The output returned by the code is

Kickstart Your Career

Get certified by completing the course

Using fillText()

Example

Set font to 30px “Arial” and write a filled text on the canvas:

Your browser does not support the HTML5 canvas tag.

const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);

ctx.font = “30px Arial”;
ctx.fillText(“Hello World”, 10, 50);

Using strokeText()

Example

Set font to 30px “Arial” and write a text, with no fill, on the canvas:

Your browser does not support the HTML5 canvas tag.

const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);

ctx.font = “30px Arial”;
ctx.strokeText(“Hello World”, 10, 50);

Add Color and Center Text

Example

Set font to 30px “Comic Sans MS” and write a filled red text in the center of the canvas:

Your browser does not support the HTML5 canvas tag.

const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);

ctx.font = “30px Comic Sans MS”;
ctx.fillStyle = “red”;
ctx.textAlign = “center”;
ctx.fillText(“Hello World”, canvas.width/2, canvas.height/2);