Canvas Txt 📐

Transforming Your Canvas with Multiline Magic ✨

#### A Miniscule library to render text on HTML5 Canvas with ZERO dependencies

Features

- [x] Multiline text
- [x] Auto line breaks
- [x] Horizontal Align
- [x] Vertical Align
- [x] Justify Align
- [x] Easy Debugging
- [x] Improved Performance

Demo

See Demo: Here

Install

``
yarn add canvas-txt

or

npm i canvas-txt
`

Usage

`html

`

Bundler

`javascript
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})
`

Node canvas

See Node js demo in ./src/node-test.ts

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

// Or
// import { createCanvas } from 'canvas'
// import { drawText } from 'canvas-txt'
// import * as fs from '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,
})

// Convert the canvas to a buffer in PNG format
const buffer = canvas.toBuffer('image/png')
fs.writeFileSync('output.png', buffer)
console.log(Total height = ${height})
}

main()
`

CDN

See fiddle : https://jsfiddle.net/geongeorgek/n5xw3ufj/2/

`html

`

`javascript
const { drawText, getTextHeight, splitText } = window.canvasTxt
/// ...remaining same
`

![](./src/docs/canvas.jpg)

Properties

| Properties | Default | Description |
| :-----------: | :----------: | :----------------------------------------------------------------------------- |
| width | Required | Width of the text box |
| height | Required | Height of the text box |
| x | Required | X position of the text box |
| y | Required | Y position of the text box |
| debug | false | Shows the border and align gravity for debugging purposes |
| align | center | Text align. Other possible values: left, right |
| vAlign | middle | Text vertical align. Other possible values: top, bottom |
| font | Arial | Font family of the text |
| fontSize | 14 | Font size of the text in px |
| fontStyle | '' | Font style, same as css font-style. Examples: italic, oblique 40deg |
| fontVariant | '' | Font variant, same as css font-variant. Examples: small-caps, slashed-zero |
| fontWeight | '' | Font weight, same as css font-weight. Examples: bold, 100 |
| lineHeight | null | Line height of the text, if set to null it tries to auto-detect the value |
| justify | false | Justify text if true, it will insert spaces between words when necessary. |

Methods

`js
import { drawText, splitText, getTextHeight } from 'canvas-txt'
`

| Method | Description |
| :---------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| drawText(ctx,text, config) | To draw the text to the canvas |
| splitText({ ctx, text, justify, width } | To split the text { ctx: CanvasRenderingContext2D, text: string, justify: boolean, width: number } |
| getTextHeight({ ctx, text, style }) | To get the height of the text { ctx: CanvasRenderingContext2D, text: string, style: string (font style we pass to ctx.font) }` ctx.font docs |