# How to write text into to an HTML canvas

> Learn how to write text onto an HTML canvas, getting a 2d context and calling its fillText() method, plus how to style it with the font and fillStyle.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-04-19 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/how-to-write-text-html-canvas/

Set the canvas size using CSS or the HTML width/height attributes to be, for example, 200 x 400:

```html
<canvas width="200" height="400"></canvas>
```

and make sure you also set the width/height properties of the canvas object in the [JavaScript](https://flaviocopes.com/javascript/), to avoid the text to render blurry, for example:

```js
canvas.width = 1800
canvas.height = 1200
```

First thing, get a reference to a canvas 

```js
const canvas = document.querySelector('canvas')
```

and create a context object from it:

```js
const context = canvas.getContext('2d')
```

Now we can call the `fillText()` method of the context object:

```js
context.fillText('hi!', 100, 100)
```

Make sure the x and y coordinates of the starting point are included in the canvas size. 

You can pass additional properties before calling `fillText()` to customize the appearance, for example:

```js
context.font = 'bold 70pt Menlo'
context.fillStyle = '#ccc'
context.fillText('hi!', 100, 100)
```