40
Canvas-Txt - The better way to render text on HTML5 Canvas
source link: https://www.tuicool.com/articles/3MbUzeE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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 :ab:
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 Descriptiondebug
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 DescriptiondrawText(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)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK