diff --git a/README.md b/README.md index ae99874..469917c 100644 --- a/README.md +++ b/README.md @@ -6,55 +6,51 @@ CanvasTextWrapper new CanvasTextWrapper(HTMLCanvasElement, String [, options]); ``` -```options``` - is a JavaScript object with the following available properties and values: +```options``` - is an object with the following available properties and values: -- ```font: String``` - text style that includes font size (in px), weight and family, similarly to CSS font shorthand property -- ```textAlign: "left" | "center" | "right"``` - horizontal alignment for each line -- ```verticalAlign: "top" | "middle" | "bottom"``` - vertical alignment for the whole text block -- ```paddingX: Number``` - horizontal padding in pixels set equally on both, left and right sides of the element -- ```paddingY: Number``` - vertical padding in pixels set equally on both, top and bottom sides of the element -- ```fitParent: Boolean``` - parameter that controls which element to fit where ```true``` means fit canvas parent's width instead of canvas own width -- ```lineBreak: "auto" | "word"``` - text split rule. When using ```"auto"```, text fills the element's width, going to a new 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 resize text to fill its padded container -- ```strokeText: Boolean``` - add text outline based on context configuration (make sure it doesn't contradict with other context settings such as globalCompositeOperation, etc) +- ```font:``` (String) - text style that includes font size in px, font weight, font family, etc. Similar to CSS font shorthand property +- ```lineHeight:``` (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 String. +- ```textAlign: "left" | "center" | "right"``` - horizontal alignment of each line +- ```verticalAlign: "top" | "middle" | "bottom"``` - vertical alignment of the whole text block +- ```paddingX:``` (Number) - horizontal padding (in px) set equally on both, left and right sides +- ```paddingY:``` (Number) - vertical padding (in px) set equally on both, top and bottom sides +- ```fitParent:``` (Boolean) - if enabled, text will fit canvas container's width instead of canvas own width +- ```lineBreak: "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 container +- ```strokeText:``` (Boolean) - outline text based on context configuration +- ```justifyLines:``` (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 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: - ``` { - font: "18px Arial, sans-serif", - textAlign: "left", - verticalAlign: "top", - paddingX: 0, - paddingY: 0, - fitParent: false, - lineBreak: "auto", - sizeToFill: false, - strokeText: false - } + 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 -Use standard canvas text drawing сщташпгкфешщты 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; +var canvas = document.getElementById("#canvasText"); +canvas.width = 200; +canvas.height = 200; context = canvas.getContext("2d"); -context.fillStyle = "rgb(255, 255, 255)"; -context.fillRect(0, 0, canvas.width, canvas.height); - -new CanvasTextWrapper(canvas, "Hi there", { - font: "normal 40px Open Sans, sans-serif", - textAlign: "center", - verticalAlign: "bottom", - paddingY: 10, - lineBreak: "word", -}); +context.lineWidth = 2; +context.strokeStyle = "#ff0000"; +CanvasTextWrapper(canvas,"Hello"); //default options will apply ``` ##Examples