Syntax
-
new CanvasTextWrapper(HTMLCanvasElement, String [, Options]);
+
CanvasTextWrapper(HTMLCanvasElement, String [, Options]);
-
font- (String) - text style that includes font size in px (REQUIRED), weight & family, etc. specified similarly to CSS - font shorthand property + (String) - text style that includes font size in px, weight, font family, etc. Similar to CSS font shorthand + property +
+
-
+ lineHeight+ (Number or String) +
-
+
- number - n times font size where 1 is equivalent to '100%' +
- "%" +
- "px" +
-
textAlign- (String) - horizontal alignment that applies for each line + (String) - horizontal alignment of each line
- "left"
- "center" @@ -45,7 +54,7 @@
-
verticalAlign- (String) - vertical alignment that applies on a whole block of text + (String) - vertical alignment of the whole block of text
- "top"
- "middle" @@ -54,12 +63,11 @@
-
paddingX- (Number) - horizontal padding in pixels set equally on both, left and right sides of - the element + (Number) - horizontal padding (in px) set equally on both, left and right sides of the container
-
paddingY- (Number) - vertical padding in pixels set equally on both, top and bottom sides of the element + (Number) - vertical padding (in px) set equally on both, top and bottom sides of the container
-
fitParent@@ -73,7 +81,7 @@lineBreak(String) - text split rule
-
-
- "auto" - text fills the element's width going to a new line on a whole word when no more space +
- "auto" - text fills padded container going to a next line on a whole word
- "word" - each next word will be placed on a new line
@@ -81,61 +89,59 @@
- "true" - ignore given font size and resize text to fill its padded container -
- "false" - use specified or default font size +
- true - ignore given font size/line height and resize text to fill its padded container +
- false - use specified or default font size
-
strokeText- (Boolean) - text outline based on context configuration (make sure it doesn't contradict with other context settings such as globalCompositeOperation, etc) -
-
-
- "true" - enable text outline -
- "false" - enable text outline -
+ -
+ justifyLines+ (Boolean) - flex spaces between words so all lines match the same width (one-word lines are skipped).
-
-
- 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 of the word unless sizeToFill option is used. + 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
- -
The default options object which values will be used if a property is not specified or no object is passed:
+ +Default Options
{
- font: "18px Arial, sans-serif",
- textAlign: "left",
- verticalAlign: "top",
- paddingX: 0,
- paddingY: 0,
- fitParent: false,
- lineBreak: "auto",
- sizeToFill: false
+ font: "18px Arial, sans-serif",
+ lineHeight: 1,
+ textAlign: "left",
+ verticalAlign: "top",
+ paddingX: 0,
+ paddingY: 0,
+ fitParent: false,
+ lineBreak: "auto",
+ sizeToFill: false,
+ allowNewLine: true,
+ justifyLines: false
}
- Usage
+
- Use standard canvas text drawing methods such as "fillStyle" and "globalCompositeOperation" when needed before - using CanvasTextWrapper like so: + Use context settings such as "fillStyle", "lineWidth" or "strokeStyle" 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";
- var wrapper = new CanvasTextWrapper(canvas, 'Hello'); // default options will apply
-
- +
+ 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
+
+
Installation
+
bower install canvas-text-wrapper
npm install canvas-text-wrapper
@@ -148,4 +154,4 @@
← View on GitHub
-