How to Draw Text with HTML Canvas
Tags: html, javascript, tutorial, webdev
Published: 2022-03-24 16:36:00

Along with supporting graphics, shapes, and drawing, HTML Canvas also supports adding text. The text on HTML canvas can't be highlighted, as it is part of the final graphic produced. In this article, let's look at how HTML Canvas text works.

If you're brand new to HTML Canvas, start with our "[Getting Started with HTML Canvas](https://fjolt.com/article/html-canvas-getting-started)" guide.

## How to draw text on HTML Canvas
If you want to draw text onto your HTML canvas, we need to start by defining how that font should look. To do that, we use `ctx.font`, which has the same syntax as the CSS font property. For example, if we wanted our font to be Arial 88px bold, we could define our font like this:

```javascript
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.font = 'bold 88px Arial';
```

That string gives us the basic style of our font, but if we want to change the color, we can reuse the fillStyle property (which works the same way as it does for shapes). Let's make our font white:

```javascript
ctx.fillStyle = 'white';
```

Now that we've defined both our font and our color, we can fill our text using the `ctx.fillText()` function. `ctx.fillText()` has the following syntax:

```javascript
ctx.fillText(textToDisplay, x, y)
```

- `textToDisplay` is the text we want to show.
- `x` is the x coordinate of that text.
- `y` is the y coordinate of that text.

For example, our final code, supposing we wanted to show the text "Hello World" at coordinates `(10,80)`px, would look like this:

```javascript
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.font = 'bold 88px Arial';
ctx.fillStyle = 'white';
ctx.fillText("Hello World!", 10, 80);
```

This will ultimately produce something like this:

![How to render text with HTML Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jettfkzmra1tmaw6hm3m.png)
 
### Why can't I see my HTML canvas text?
The important thing to note when drawing text, is the (x,y) coordinates are measured from the bottom line of the text. That means if you draw your text at (0, 0)px, you won't see it. You need to draw it further down, i.e. (0, 80)px

## How to add a text border with HTML Canvas
Similar to other canvas utilities, you can draw a text border with HTML canvas using `ctx.lineWidth` and `ctx.strokeStyle`. We can then use strokeText to draw a stroke around our text:

```javascript
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ctx.font = 'bold 88px Arial';
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.strokeText("Hello World!", 10, 50);
```

![How to render stroked text with HTML Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2yluljuq5l0jvxi8i8v.png)
 

If you want to fill and stroke text in HTML canvas at the same time, use both `ctx.strokeText()` and `ctx.fillText` at the same place, with the same text. That will let you fill and stroke the same text.

```javascript
ctx.font = 'bold 88px Arial';
ctx.strokeStyle = 'red';
ctxt.fillStyle = 'white';
ctx.lineWidth = 4;
ctx.strokeText("Hello World!", 10, 80);
ctx.fillText("Hello World!", 10, 80);
```

![How to stroke and fill text with HTML Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytdi6x2e0lsd5uoy2vl7.png)
 

## Text Align and Baseline in HTML Canvas
Similar to other forms of text on the web, HTML Canvas supports both text align and baseline alterations, to let us customize our text further.

`ctx.textAlign`
`ctx.textAlign` accepts 5 different values:

- `left` - for left aligned text.
- `right` - for right aligned text.
- `center` - for center aligned text.
- `start` - for text aligned at the start depending on whether the text is right-to-left or left-to-right.
- `end` - for text aligned at the end depending on whether the text is right-to-left or left-to-right.

The text is aligned based on the x position of where you fill or stroke your text from. That means, if the x position is 50, center will mean that the center of the text is 50. If your text align is right, then 50 will be at the end of your text. For example, if we had the following code:

```javascript
ctx.font = 'bold 44px Arial';
ctx.fillStyle = 'white';
ctx.textAlign = "left";
ctx.fillText("Left Aligned", 300, 80);
ctx.textAlign = "center";
ctx.fillText("Center Aligned", 300, 160);
ctx.textAlign = "right";
ctx.fillText("Right Aligned", 300, 240);
```

Each line starts at x coordinate 300. Therefore, we end up with something like this, where the line represents 300.

![How to align text with HTML Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaz6shpogikt3nbhc8k8.png)
 

`ctx.textBaseline`
Similar to `ctx.textAlign`, textBaseline has a number of possible values:

- `top` - the text baseline is at the top.
- `middle` - the text baseline is at the middle.
- `bottom` - the text baseline is at the bottom.
- `hanging` - used mostly in indic scripts, the baseline is at the top/hanging.
- `alphabetic` - the default alphabetic baseline.
- `ideographic` - used mostly in East-Asian scripts, the baseline is below any letters which protrude under the alphabetic baseline.

To see what this looks like, imagine we had the following code:

```javascript
ctx.font = 'bold 44px Arial';
ctx.fillStyle = 'white';
ctx.textBaseline = "top";
ctx.fillText("Top Baseline", 50, 80);
ctx.textBaseline = "middle";
ctx.fillText("Middle Baseline", 50, 160);
ctx.textBaseline = "bottom";
ctx.fillText("Bottom Baseline", 50, 240);
ctx.textBaseline = "hanging";
ctx.fillText("Hanging Baseline", 50, 320);
ctx.textBaseline = "alphabetic";
ctx.fillText("Alphabetic Baseline", 50, 380);
ctx.textBaseline = "ideographic";
ctx.fillText("Ideographic Baseline", 50, 440);
```

We would end up with something that looks like this, where the red line represents the text baseline:

![How to add baselines to text with HTML Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tbhuo0oqx9vazournls.png)
 

## Wrapping Text
Wrapping text in HTML canvas is a little trickier than in other places, since there is no built in text wrap function in HTML Canvas. If you want to learn about wrapping text, [read my article on that here](https://fjolt.com/article/html-canvas-how-to-wrap-text).

## Conclusion
Text is frequently used in HTML Canvas so it's really useful to know how it works. This article has covered everything you need to know to start drawing text on your HTML Canvas. Don't forget to read my [full guide on HTML Canvas here](https://fjolt.com/series/html-canvas-tutorial).