Drawing Text

Drawing text

Canvas draws not just shapes and lines but also text. However in reality, text drawn in canvas is drawn as an image. This means that the text is not selectable with a mouse cursor like normal text in other HTML elements. Unless you want to take advantage of the wonderful canvas transformations, there is no real advantage of drawing text in canvas. The best way of writing text in HTML is by using the good old <p> element.

Unless you have a very good reason (everyone has their own good reasons) to draw text in canvas, you should use other HTML elements to create text, and then layer the text over the of the canvas with CSS positioning.

That said, now let us see how text is drawn in canvas:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

var text = "WLECOME TO SYTECH ACADEMY"; 
context.fillText(text, 40, 40);

Canvas text



As easy as that! As you might have noticed, the text produced is uncomfortably small , that is because the default font size for text in canvas is 10px.

fillText()

The fillText() is a method of the 2d rendering context used when drawing text in canvas. The method takes four arguments, of which one is optional. The first argument is the string of the text you want to draw, the second and third are the bottom left (x, y) coordinates for the position of the start of the text. The fourth optional argument can be used to specify the maximum width of your text in pixels.

The font size and font family are set by the font attribute of the context. The default value of the font attribute is "10px sans-serif".

Now let us change the font in the following example:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

var text = "WELCOME TO SYTECH ACADEMY"; 

//Change font size and family
context.font = "30px serif";

context.fillText(text, 40, 40);

Canvas text



The font attribute can also be used to make the text bold as follows:


context.font = "bold 30px serif";

Canvas text



or italic as follows:


context.font = "italic 30px serif";

Canvas text



or both as follows:


context.font = "bold italic 30px serif";

Canvas text



strokeText()

The fillText() method has a complementary twin method strokeText() which, as you might might have guessed, strokes the text with no fill. This method takes in the same arguments as the fillText() method.


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

var text = "WELCOME TO SYTECH ACADEMY"; 

//Change font size and style
context.font = "bold italic 30px serif";

context.strokeText(text, 40, 40);

Canvas text



font

We have been using the font attribute in our examples above. This property can be used to specify:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

Example of setting font as small caps:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

var text = "Welcome To Sytech Academy"; 

context.font = "italic small-caps bold 30px serif";

context.fillText(text, 40, 40);

Canvas text



textAlign and textBaseline

The horizontal text alignment can be set with the textAlign property, and the vertical text alignment with the textBaseline property.

The values the textAlign property can be set to are:

  • left
  • center
  • right

The values the textBaseline
property can be set to are:

  • top
  • hanging
  • middle
  • alphabetic
  • ideographic
  • bottom

Unset, the textAlign property defaults to left, and the textBaseline property is defaults to alphabetic.