Gimenz / Canvas-Txt

The better way to render text on HTML5 Canvas

Canvas Txt 📐✍

Better way to render text on the HTML5 Canvas

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

Features

• Multiline text
• Auto line breaks
• Horizontal Align
• Vertical Align
• Easy Debugging

Demo

See Demo: Here

Install

npm install canvas-txt --save

or

yarn add canvas-txt

Usage

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

Webpack

import canvasTxt from 'canvas-txt'

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

const txt = 'Lorem ipsum dolor sit amet'

canvasTxt.fontSize = 24

canvasTxt.drawText(ctx, txt, 100, 200, 200, 200)
//canvasTxt.drawText(ctx,txt,x,y,width,height);

Node canvas

See nodejs demo

const { createCanvas } = require('canvas')

const canvasTxt = require('canvas-txt').default

const canvas = createCanvas(400, 400)
const ctx = canvas.getContext('2d')

ctx.fillStyle = 'black'
const txt = 'Lorem ipsum dolor sit amet'

canvasTxt.drawText(ctx, txt, 50, 50, 200, 200)

CDN

See fiddle : here

<script src="//unpkg.com/canvas-txt"></script>

var canvasTxt = window.canvasTxt.default
/// ...remaining same as webpack

Properties

Properties	Default	Description
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
fontSize	14	Font size of the text in px
font	Arial	Font family of the text
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.
stroke	true	Stroke text if true, it will add stroke outer the text.
strokeWidth	1	Stroke line width.
strokeColor	black	Stroke color.

Methods

Method	Description
drawText(ctx,text,x,y,width,height)	To draw the text to the canvas

Example

import canvasTxt from 'canvas-txt'

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

//You can use \n to define custom line breaks
const txt = 'Lorem \nipsum dolor sit amet'

//You can also use other methods alongside this
ctx.fillStyle = '#ff0000' //red color text

canvasTxt.font = 'Verdana'
canvasTxt.fontSize = 20
canvasTxt.align = 'left'
canvasTxt.lineHeight = 60
canvasTxt.debug = true //shows debug info
canvasTxt.justify = false
canvasTxt.stroke = true // set the stroke
canvasTxt.strokeColor = '#FF0000' // stroke color
canvasTxt.strokeWidth = 1 // stroke line width
canvasTxt.drawText(ctx, txt, 100, 200, 200, 200)

React wrapper

A wrapper of this library is available for react. Check neomusic/react-canvas-txt