
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
Webpack
const c = documentconst ctx = c const txt = 'Lorem ipsum dolor sit amet' canvasTxtfontSize = 24 canvasTxt//canvasTxt.drawText(ctx,txt,x,y,width,height);
Node canvas
See nodejs demo
const createCanvas = const canvasTxt = default const canvas = const ctx = canvas ctxfillStyle = 'black'const txt = 'Lorem ipsum dolor sit amet' canvasTxt
CDN
See fiddle : here
var canvasTxt = windowcanvasTxtdefault/// ...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. |
Methods
Method | Description |
---|---|
drawText(ctx,text,x,y,width,height) |
To draw the text to the canvas |
Example
const c = documentconst ctx = c //You can use \n to define custom line breaksconst txt = 'Lorem \nipsum dolor sit amet' //You can also use other methods alongside thisctxfillStyle = '#ff0000' //red color text canvasTxtfont = 'Verdana'canvasTxtfontSize = 20canvasTxtalign = 'left'canvasTxtlineHeight = 60canvasTxtdebug = true //shows debug infocanvasTxtjustify = falsecanvasTxt
React wrapper
A wrapper of this library is available for react. Check neomusic/react-canvas-txt