mirror of
https://github.com/wassname/CanvasTextWrapper.git
synced 2026-06-27 17:13:51 +08:00
60c009b4329c2f132f6e8d229006877f9c5e76d4
CanvasTextWrapper
##Syntax
new CanvasTextWrapper(HTMLCanvasElement, String [, options]);
options - is a JavaScript object with the following available properties and values:
font: String- text style that includes font size in px (REQUIRED), weight & family, similar to CSS font shorthand propertytextAlign: "left" | "center" | "right"- horizontal alignment that applies for each lineverticalAlign: "top" | "middle" | "bottom"- vertical alignment that applies on a whole block of textpaddingX: Number- horizontal padding in pixels set equally on both, left and right sides of the elementpaddingY: Number- vertical padding in pixels set equally on both, top and bottom sides of the elementfitParent: Boolean- parameter that controls which element to fit wheretruemeans fit canvas parent's width instead of canvas own widthlineBreak: "auto" | "word"- text split rule. When using"auto", text fills the element's width going to a new line on a whole word when no more space. If"word"is set as value, each next word will be placed on a new line.sizeToFill: Boolean- ignore given font size and resize text to fill its padded container
NOTE: if a single word is too long to fit the width with specified font size, it will be broken into as many lines as required on any letter without specific word breaking rule.
##Defaults
The default options object which values will be used if a property is not specified or no object is passed:
{
font: "18px Arial, sans-serif",
textAlign: "left",
verticalAlign: "top",
paddingX: 0,
paddingY: 0,
fitParent: false,
lineBreak: "auto",
sizeToFill: false
}
##Usage Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before using CanvasTextWrapper like so:
var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 250;
context = canvas.getContext("2d");
context.fillStyle = "rgb(255, 255, 255)";
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = "destination-out";
new CanvasTextWrapper(canvas, "Hi there", {
font: "normal 40px Open Sans, sans-serif",
textAlign: "center",
verticalAlign: "bottom",
paddingY: 10,
lineBreak: "word",
});
##Examples http://namniak.github.io/CanvasTextWrapper/
##Installation
bower install canvas-text-wrapper
npm install canvas-text-wrapper
Description
JavaScript canvas text wrapper that automatically splits a string into lines on specified rule with optional alignments and padding.
Languages
JavaScript
100%