43

Canvas-Txt - The better way to render text on HTML5 Canvas

 5 years ago
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.
neoserver,ios ssh client

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

MNBfiaQ.jpg!web

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)

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK