Package Exports

canvas-txt

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-txt) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Canvas Txt 📐✍

Better way to render text on the HTML5 Canvas

NPM NPM NPM

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'

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

var 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);

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'

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

//You can use \n to define custom line breaks
var 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