Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
August 16, 2022 13:51
July 14, 2023 20:54
July 3, 2019 01:18
November 9, 2023 15:57
August 4, 2022 00:43
September 21, 2023 23:33
September 6, 2023 19:10
canvas-txt multiline text on html canvas

Canvas Txt πŸ“

Transforming Your Canvas with Multiline Magic ✨


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


  • Multiline text
  • Auto line breaks
  • Horizontal Align
  • Vertical Align
  • Justify Align
  • Easy Debugging
  • Improved Performance


See Demo: Here


yarn add canvas-txt


npm i canvas-txt


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


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

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



See fiddle :

<script src="//"></script>
const { drawText, getTextHeight, splitText } = window.canvasTxt
/// ...remaining same


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.


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