Adds text shadow option.

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
 

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"

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)