Skip to content
The better way to render text on HTML5 Canvas
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build edited readme Jul 2, 2019
demo edited readme Jul 2, 2019
scripts added auto lineheight fix Jul 2, 2019
src Removed unwanted Jul 2, 2019
tests added auto lineheight fix Jul 2, 2019
LICENSE added auto lineheight fix Jul 2, 2019
README.md added https to cdn url Jul 2, 2019
babel.config.js added auto lineheight fix Jul 2, 2019
package-lock.json added auto lineheight fix Jul 2, 2019
package.json edited readme Jul 2, 2019
webpack.config.js added auto lineheight fix Jul 2, 2019

README.md

Canvas Txt

The better way to render text on HTML5 Canvas

A library to print multiline text on HTML5 canvas with better line breaks and alignments 🆎

Demo

See Demo: Here

Install

npm install canvas-txt --save

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.textSize = 24;

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

CDN

See fiddle : here

<script src="https://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
textSize 14 Font size of the text in px
font Arial Font family of the text
lineHeight null Line height of the text, if set to null it tries to auto-detect the value

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.textSize = 20;
canvasTxt.align = "left";
canvasTxt.lineHeight = 60;
canvasTxt.debug = true; //shows debug info
canvasTxt.drawText(ctx,txt,100,200,200,200)
You can’t perform that action at this time.