Canvas-Txt
Canvas-Txt copied to clipboard
Published
20 hours ago •
geongeorge
geongeorge
Multiline 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
- [x] Multiline text
- [x] Auto line breaks
- [x] Horizontal Align
- [x] Vertical Align
- [x] 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. |
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.drawText(ctx, txt, 100, 200, 200, 200)
React wrapper
A wrapper of this library is available for react. Check neomusic/react-canvas-txt
geongeorge