HTML5 Canvas: Center Text on Point horizontally and vertically

In this tutorial, I would like to show you how you can center a text horizontally and vertically on an HTML 5 canvas. In other words, the text should be placed just in the middle of a given point.

First, we define a canvas in HTML (here with a size of 200 x 200 pixel) on which we would like to display our text later.

<canvas id="canv" width="200" height="200"></canvas>

After that, we are adding the following JavaScript, which is responsible for writing the text:

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

var x = 100;
var y = 100; 

context.font         = '20px Verdana';
context.fillStyle    = '#000000';
context.textAlign    = 'center';
context.textBaseline = 'middle'; 

context.fillText('Text', x, y);

We would like to place our text exactly in the middle of our 200 x 200 pixel canvas. This corresponds to the point 100/100 in the coordinate system. In the example above, we have defined the variables x and y for this point.

After that, we are defining font size and name via context.font and the filling, that is the font color, via context.fillStyle. In the example we take the font Verdana with a size of 20px and written with black color (#00000).

The actual centering is done in the next two lines. Using the property textAlign, you can adjust the horizontal alignment, textBaseline can be used to specify the vertical. By setting the horizontal alignment to "center" and the vertical alignment to "middle", our text is centered exactly in the middle of the given point.

Subsequently, the output of the text on our HTML5 canvas is carried out with fillText. We can just pass the text we would like to write (here "Text") and the coordinates (here x = 100 and y = 100) to this function. The function always uses the last styles defined before.

Other Property Values of textAlign and textBaseline

Beyond "center", you can also use "left" or "right" for the horizontal alignment, to let the text start or end at the provided x coordinate.

The vertical alignment with textBaseline, can also be set to "bottom" or "top" to adjust the text at the top or the bottom off its complete height. "alphabetic" and "hanging" align the text from the bottom or the top at letters like a, c or e while "ideographic" aligns the text at the ideographic baseline under the alphabetic.