From bc78d45798395b91254c387aa37a400e30b1e709 Mon Sep 17 00:00:00 2001
From: Ian Howard <ian@roll20.net>
Date: Tue, 21 Nov 2023 10:14:20 -0800
Subject: [PATCH] Adds text shadow option.

---
 README.md               |  2 ++
 package.json            |  2 +-
 src/canvas-txt/index.ts | 11 ++++++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 82cd4d7..57fa8eb 100644
--- a/README.md
+++ b/README.md
@@ -143,6 +143,8 @@ const { drawText, getTextHeight, splitText } = window.canvasTxt
 |   `justify`   |   `false`    | Justify text if `true`, it will insert spaces between words when necessary.    |
 | `strokeWidth` |   `1`        | Stroke line width.                                                             |
 | `strokeColor` |   `black`    | Stroke color.                                                                  |
+| `shadowBlur`  |   `0`        | Amount of shadow blur.                                                         |
+| `shadowColor` |   `black`    | Color of shadow blur.                                                          |
 
 ## Methods
 
diff --git a/package.json b/package.json
index c6ce2d9..072094e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@roll20/canvas-txt",
-  "version": "4.2.3",
+  "version": "4.2.4",
   "description": "Render multiline textboxes in HTML5 canvas with auto line breaks and better alignment system",
   "files": [
     "dist"
diff --git a/src/canvas-txt/index.ts b/src/canvas-txt/index.ts
index c533e5c..904ba95 100644
--- a/src/canvas-txt/index.ts
+++ b/src/canvas-txt/index.ts
@@ -18,6 +18,8 @@ export interface CanvasTextConfig {
   justify?: boolean
   strokeWidth?: number,
   strokeColor?: string,
+  shadowColor?: string,
+  shadowBlur?: number,
 }
 
 const defaultConfig = {
@@ -32,6 +34,8 @@ const defaultConfig = {
   lineHeight: null,
   justify: false,
   strokeWidth: 0,
+  shadowColor: '#000000',
+  shadowBlur: 0,
 }
 
 function drawText(
@@ -51,7 +55,7 @@ function drawText(
   const xEnd = x + width
   const yEnd = y + height
 
-  const { fontStyle, fontVariant, fontWeight, fontSize, font, strokeColor, strokeWidth } = config
+  const { fontStyle, fontVariant, fontWeight, fontSize, font, strokeColor, strokeWidth, shadowBlur, shadowColor } = config
   const style = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${font}`
   ctx.font = style
 
@@ -103,6 +107,11 @@ function drawText(
     ctx.lineWidth = strokeWidth;
   }
 
+  if (shadowBlur && shadowColor) {
+    ctx.shadowBlur = shadowBlur;
+    ctx.shadowColor = shadowColor;
+  }
+
   //print all lines of text
   textArray.forEach((txtline) => {
     ctx.fillText(txtline, textAnchor, txtY)