Adds offsetX and offsetY to place text on canvas

See namniak#28

README.md

@@ -16,6 +16,8 @@ CanvasTextWrapper(HTMLCanvasElement, String [, options]);
 | **verticalAlign** | `"top"`  `"middle"` `"bottom"` | Vertical alignment of the whole text block. |
 | **paddingX**  | *Number* | Horizontal padding (in px) that is equally set on left and right sides. |
 | **paddingY**  | *Number* | Vertical padding (in px) that is equally set on top and bottoms. |
+| **offsetX**  | *Number* | Horizontal offset (in px) that is set on left  side. |
+| **offsetY**  | *Number* | Vertical offset (in px) that is set on top. |
 | **fitParent**  | *Boolean* | Fit canvas' container size instead of its own size. |
 | **lineBreak**  | `"auto"` `"word"` |  `"auto"` - text goes to the next line on a whole word when there's no room  `"word"` - each next word is placed on a new line |
 | **sizeToFill**  | *Boolean* |  Ignore given font size and line height and resize text to fill its padded container. |
@@ -31,7 +33,7 @@ NOTE: if a single word is too long to fit the width with specified font size, it
 
 ## Default options
 ```javascript
-   { 
+   {
         font: '18px Arial, sans-serif',
         lineHeight: 1,
         textAlign: 'left',
@@ -70,7 +72,7 @@ CanvasTextWrapper(canvas, 'Hello', {strokeText: true});
 
 ## Test
 Run ```npm t```
-NOTE: Test requires [beefy](http://didact.us/beefy/) to be installed globally 
+NOTE: Test requires [beefy](http://didact.us/beefy/) to be installed globally
 
 
 ## Examples

canvas-text-wrapper.js

@@ -15,6 +15,8 @@
       justifyLines: false,
       paddingX: 0,
       paddingY: 0,
+      offsetX: 0,
+      offsetY: 0,
       fitParent: false,
       strokeText: false,
       renderHDPI: true,
@@ -65,8 +67,8 @@
 
     var EL_WIDTH = (!opts.fitParent ? canvas.width : canvas.parentNode.clientWidth) / scale;
     var EL_HEIGHT = (!opts.fitParent ? canvas.height : canvas.parentNode.clientHeight) / scale;
-    var MAX_TXT_WIDTH = EL_WIDTH - (opts.paddingX * 2);
-    var MAX_TXT_HEIGHT = EL_HEIGHT - (opts.paddingY * 2);
+    var MAX_TXT_WIDTH = EL_WIDTH - (opts.paddingX * 2) - (opts.offsetX);
+    var MAX_TXT_HEIGHT = EL_HEIGHT - (opts.paddingY * 2) - (opts.offsetY);
 
     var fontSize = opts.font.match(/\d+(px|em|%)/g) ? +opts.font.match(/\d+(px|em|%)/g)[0].match(/\d+/g) : 18;
     var textBlockHeight = 0;
@@ -89,7 +91,7 @@
       } while (text.indexOf('\n\n') > -1);
       return text;
     }
-    
+
     function setFont(fontSize) {
       if (!fontParts) fontParts = (!opts.sizeToFill) ? opts.font.split(/\b\d+px\b/i) : context.font.split(/\b\d+px\b/i);
       context.font = fontParts[0] + fontSize + 'px' + fontParts[1];
@@ -270,7 +272,7 @@
         textPos.y = parseInt(textPos.y) + lineHeight;
         if (lines[i] !== skipLineOnMatch) {
           context.fillText(lines[i], textPos.x, textPos.y);
-        
+
           if (opts.strokeText) {
             context.strokeText(lines[i], textPos.x, textPos.y);
           }
@@ -286,21 +288,21 @@
       context.textAlign = opts.textAlign;
 
       if (opts.textAlign == 'center') {
-        textPos.x = EL_WIDTH / 2;
+        textPos.x = (EL_WIDTH  + opts.offsetX) / 2;
       } else if (opts.textAlign == 'right') {
         textPos.x = EL_WIDTH - opts.paddingX;
       } else {
-        textPos.x = opts.paddingX;
+        textPos.x = opts.paddingX + opts.offsetX;
       }
     }
 
     function setVertAlign() {
       if (opts.verticalAlign == 'middle') {
-        textPos.y = (EL_HEIGHT - textBlockHeight) / 2;
+        textPos.y = (EL_HEIGHT - textBlockHeight + opts.offsetY) / 2;
       } else if (opts.verticalAlign == 'bottom') {
         textPos.y = EL_HEIGHT - textBlockHeight - opts.paddingY;
       } else {
-        textPos.y = opts.paddingY;
+        textPos.y = opts.paddingY + opts.offsetY;
       }
     }
 
@@ -329,6 +331,12 @@
       if (isNaN(opts.paddingY))
         throw new TypeError('Property "paddingY" must be a Number.');
 
+      if (isNaN(opts.offsetX))
+        throw new TypeError('Property "offsetX" must be a Number.');
+
+      if (isNaN(opts.offsetY))
+        throw new TypeError('Property "offsetY" must be a Number.');
+
       if (typeof opts.fitParent !== 'boolean')
         throw new TypeError('Property "fitParent" must be a Boolean.');
 

index.d.ts

@@ -26,6 +26,14 @@ export interface CanvasTextWrapperOptions {
     * Vertical padding (in px) that is equally set on top and bottoms.
     */
    paddingY?: number,
+   /**
+    * Horizontal offset (in px) that is set on left side.
+    */
+   offsetX?: number,
+   /**
+    * Vertical offset (in px) that is set on top.
+    */
+   offsetY?: number,
    /**
     * Fit canvas' container size instead of its own size.
     */
@@ -64,4 +72,3 @@ export interface CanvasTextWrapperOptions {
     */
    textDecoration?: "none" | "underline"
 }
-

package.json

@@ -1,7 +1,7 @@
 {
   "name": "canvas-text-wrapper",
   "description": "Split canvas text into lines on specified rule with optional alignment, padding, and more. Supports HDPI screens.",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "license": "MIT",
   "main": "canvas-text-wrapper.js",
   "keywords": [

test/test.js

@@ -28,4 +28,4 @@ var opts = {
   paddingX: 20
 };
 
-CanvasTextWrapper(canvas, 'What an awesome library!', opts);
+CanvasTextWrapper(canvas, 'What an awesome library!', opts);