Canvas-Txt: Multiline Text Magic on HTML5 Canvas
Tags: webdev, javascript, tutorial, beginners
Published: 2023-11-03 17:55:06

As developers, we've often been in situations where we need to render text on a canvas element in HTML5. It could be for a game, a custom chart, or even an advanced animation. But, anyone who's tried this knows that the native canvas API is... a bit limited when it comes to handling text. Enter **Canvas-Txt** 📐✨, a minuscule, dependency-free library that transforms how we draw text on HTML5 canvas.

## What's Canvas-txt?

Canvas-Txt extends the native canvas text rendering capabilities with a set of much-needed features:

- **Multiline Text**: Easily render paragraphs.
- **Auto Line Breaks**: No more manual calculation for breaking lines.
- **Text Alignment**: Supports horizontal, vertical, and even justify alignment.
- **Debugging Tools**: Comes with visual aids to help place your text exactly where you want it.
- **Performance**: It's built for speed, so no more trade-offs between functionality and performance.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ld423ipfbxh26i07flh.png)



## See It in Action

Before we dive into the code, take a peek at the live demo [here](https://canvas-txt.geongeorge.com) to see what you'll be capable of after this tutorial.

## Setting Up

First things first, let's add Canvas-Txt to your project:

```shell
yarn add canvas-txt

# Or with npm
npm i canvas-txt
```

## The Basics: Drawing Text

Here's the simplest example to get you started. Add a canvas element to your HTML:

```html
<canvas id="myCanvas" width="500" height="500"></canvas>
```

Now, let's draw some text on it using Canvas-Txt:

```js
import { drawText } from 'canvas-txt'

const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')

ctx.clearRect(0, 0, 500, 500)

const txt = 'Lorem ipsum dolor sit amet'

const { height } = drawText(ctx, txt, {
  x: 100,
  y: 200,
  width: 200,
  height: 200,
  fontSize: 24,
})

console.log(`Total height = ${height}`)
```

When you run this code, you’ll see "Lorem ipsum dolor sit amet" beautifully rendered on the canvas, enclosed in a 200x200px box starting from position (100,200).

{% codepen https://codepen.io/geon-george/pen/MWLbwVm %}


## Using Canvas-Txt on the Server with Node.js

If you're working in a Node.js environment, you can use Canvas-Txt with node-canvas:

```js
const { createCanvas } = require('canvas')
const { drawText } = require('canvas-txt')
const fs = require('fs')

function main() {
  const canvas = createCanvas(400, 400)
  const ctx = canvas.getContext('2d')
  const txt = 'Hello World!'

  const { height } = drawText(ctx, txt, {
    x: 100,
    y: 200,
    width: 200,
    height: 200,
    fontSize: 24,
  })

  const buffer = canvas.toBuffer('image/png')
  fs.writeFileSync('output.png', buffer)
  console.log(`Total height = ${height}`)
}

main()
```

With this setup, you can generate images on the server side that include dynamic text content.

## Conclusion

And there you have it! Canvas-Txt is a powerful and easy-to-use solution for all your canvas text rendering needs. Whether you’re working on a dynamic web application or generating images on the server side, Canvas-Txt simplifies the process, giving you the ability to focus on creating a great user experience rather than wrestling with text metrics.

To dive even deeper and to learn more about the customization options available, be sure to check out [the official Canvas-Txt documentation](https://github.com/geongeorge/Canvas-Txt). With this tool in your development arsenal, you're well-equipped to make your canvas text renderings as simple or sophisticated as your project requires.

Happy coding, and may your text always align perfectly on your canvas!