From ddb47ab3408032de6409a20ce59afdee988fa0b4 Mon Sep 17 00:00:00 2001
From: ChemicalLuck <j.tebbett@outlook.com>
Date: Mon, 7 Oct 2024 10:34:42 +0100
Subject: [PATCH 1/3] Added drawStyle setting that uses fillText and strokeText
 from the CanvasRenderingContext2D interface

---
 README.md               |  1 +
 src/canvas-txt/index.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 0a0369b..021ad48 100644
--- a/README.md
+++ b/README.md
@@ -134,6 +134,7 @@ const { drawText, getTextHeight, splitText } = window.canvasTxt
 |    `debug`    |   `false`    | Shows the border and align gravity for debugging purposes                      |
 |    `align`    |   `center`   | Text align. Other possible values: `left`, `right`                             |
 |   `vAlign`    |   `middle`   | Text vertical align. Other possible values: `top`, `bottom`                    |
+|  `drawStyle`  |    `fill`    | Text draw style. Other possible values: `outline`                              |
 |    `font`     |   `Arial`    | Font family of the text                                                        |
 |  `fontSize`   |     `14`     | Font size of the text in px                                                    |
 |  `fontStyle`  |     `''`     | Font style, same as css font-style. Examples: `italic`, `oblique 40deg`        |
diff --git a/src/canvas-txt/index.ts b/src/canvas-txt/index.ts
index e8f27ff..328c1c8 100644
--- a/src/canvas-txt/index.ts
+++ b/src/canvas-txt/index.ts
@@ -9,6 +9,7 @@ export interface CanvasTextConfig {
   debug?: boolean
   align?: 'left' | 'center' | 'right'
   vAlign?: 'top' | 'middle' | 'bottom'
+  drawStyle?: 'fill' | 'outline'
   fontSize?: number
   fontWeight?: string
   fontStyle?: string
@@ -22,6 +23,7 @@ const defaultConfig = {
   debug: false,
   align: 'center',
   vAlign: 'middle',
+  drawStyle: 'fill',
   fontSize: 14,
   fontWeight: '',
   fontStyle: '',
@@ -34,7 +36,7 @@ const defaultConfig = {
 function drawText(
   ctx: CanvasRenderingContext2D,
   myText: string,
-  inputConfig: CanvasTextConfig
+  inputConfig: CanvasTextConfig,
 ) {
   const { width, height, x, y } = inputConfig
   const config = { ...defaultConfig, ...inputConfig }
@@ -95,10 +97,14 @@ function drawText(
     debugY = y + height / 2
     txtY -= negOffset
   }
+
+  const drawFunction =
+    config.drawStyle === 'fill' ? ctx.fillText : ctx.strokeText
+
   //print all lines of text
   textArray.forEach((txtline) => {
     txtline = txtline.trim()
-    ctx.fillText(txtline, textAnchor, txtY)
+    drawFunction(txtline, textAnchor, txtY)
     txtY += charHeight
   })
 

From eb6ac4ba8dee133054eaded0116212ff595ea92d Mon Sep 17 00:00:00 2001
From: ChemicalLuck <j.tebbett@outlook.com>
Date: Mon, 7 Oct 2024 13:37:22 +0100
Subject: [PATCH 2/3] Updated package.json

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 022b41f..ada28fa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "canvas-txt",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Render multiline textboxes in HTML5 canvas with auto line breaks and better alignment system",
   "files": [
     "dist"

From 55b53df86140e3d6a7f82de31f99eea62cd050ca Mon Sep 17 00:00:00 2001
From: ChemicalLuck <j.tebbett@outlook.com>
Date: Mon, 7 Oct 2024 14:03:21 +0100
Subject: [PATCH 3/3] binding context

---
 src/canvas-txt/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/canvas-txt/index.ts b/src/canvas-txt/index.ts
index 328c1c8..7e3a75d 100644
--- a/src/canvas-txt/index.ts
+++ b/src/canvas-txt/index.ts
@@ -99,7 +99,9 @@ function drawText(
   }
 
   const drawFunction =
-    config.drawStyle === 'fill' ? ctx.fillText : ctx.strokeText
+    config.drawStyle === 'fill'
+      ? ctx.fillText.bind(ctx)
+      : ctx.strokeText.bind(ctx)
 
   //print all lines of text
   textArray.forEach((txtline) => {