mirror of
https://github.com/wassname/CanvasTextWrapper.git
synced 2026-06-27 20:35:15 +08:00
a1ba88647e3ff4dfd8fd2cffa71b326b7fdffcc7
Fixed bug with numeric value of font-weight
CanvasTextWrapper
##Syntax
new CanvasTextWrapper(HTMLCanvasElement, String [, options]);
options - is an object with the following available properties and values:
font:(String) - text style that includes font size in px, font weight, font family, etc. Similar to CSS font shorthand propertylineHeight:(String or Number) - Number means n times font size where 1 is equivalent to '100%'. Also the property can be set in "%" or "px" using StringtextAlign: "left" | "center" | "right"- horizontal alignment of each lineverticalAlign: "top" | "middle" | "bottom"- vertical alignment of the whole text blockpaddingX:(Number) - horizontal padding (in px) set equally on both, left and right sidespaddingY:(Number) - vertical padding (in px) set equally on both, top and bottom sidesfitParent:(Boolean) - if enabled, text will fit canvas container's width instead of canvas own widthlineBreak: "auto" | "word"- text split rule. When using"auto", text goes to a next line on a whole word when there's no more room. If"word"is set as value, each next word will be placed on a new line.sizeToFill:(Boolean) - ignore given font size and line height and resize text to fill its padded containerstrokeText:(Boolean) - outline text based on context configurationjustifyLines:(Boolean) - if enabled, all lines match the same width with flexed spaces between words (one-word lines are ignored).allowNewLine:(Boolean) if enabled, the text breaks on every new line character "\n" otherwise it'll be considered as a space
NOTE: if a single word is too long to fit the width with specified font size, it will break on any letter unless sizeToFill option is enabled.
##Defaults
{
font: "18px Arial, sans-serif",
lineHeight: 1,
textAlign: "left",
verticalAlign: "top",
paddingX: 0,
paddingY: 0,
fitParent: false,
lineBreak: "auto",
strokeText: false
sizeToFill: false,
allowNewLine: true,
justifyLines: false
}
##Usage Configure context settings properties such as "fillStyle", "lineWidth" or "strokeStyle" before using CanvasTextWrapper like so:
var canvas = document.getElementById("#canvasText");
canvas.width = 200;
canvas.height = 200;
context = canvas.getContext("2d");
context.lineWidth = 2;
context.strokeStyle = "#ff0000";
CanvasTextWrapper(canvas,"Hello"); //default options will apply
##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%