From 755597d8970859cf514612f4a6d34d8481c88e1b Mon Sep 17 00:00:00 2001
From: John Thomson <john_thomson@sil.org>
Date: Thu, 9 Apr 2026 17:47:48 -0500
Subject: [PATCH] Make Canvas too text transparency work (BL-16133)

---
 .../toolbox/canvas/CanvasToolControls.tsx     |  5 ++--
 .../toolbox/canvas/canvasColorUtils.test.ts   | 23 +++++++++++++++++++
 .../toolbox/canvas/canvasColorUtils.ts        | 11 +++++++++
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.test.ts
 create mode 100644 src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.ts

diff --git a/src/BloomBrowserUI/bookEdit/toolbox/canvas/CanvasToolControls.tsx b/src/BloomBrowserUI/bookEdit/toolbox/canvas/CanvasToolControls.tsx
index d1514bc2dbf7..6e506bc68344 100644
--- a/src/BloomBrowserUI/bookEdit/toolbox/canvas/CanvasToolControls.tsx
+++ b/src/BloomBrowserUI/bookEdit/toolbox/canvas/CanvasToolControls.tsx
@@ -50,6 +50,7 @@ import {
     kImageFitModeContainValue,
     kImageFitModeCoverValue,
 } from "./canvasElementUtils";
+import { getPersistedCanvasColor } from "./canvasColorUtils";
 import { deselectVideoContainers } from "../../js/videoUtils";
 import { CanvasElementKeyHints } from "./CanvasElementKeyHints";
 import { ToolBox } from "../toolbox";
@@ -542,7 +543,7 @@ const CanvasToolControls: React.FunctionComponent = () => {
 
     // We come into this from chooser change
     const updateTextColor = (newColor: IColorInfo) => {
-        const color = newColor.colors[0]; // text color is always monochrome
+        const color = getPersistedCanvasColor(newColor);
         const canvasElementManager = getCanvasElementManager();
         if (canvasElementManager) {
             // Update the toolbox controls
@@ -565,7 +566,7 @@ const CanvasToolControls: React.FunctionComponent = () => {
 
     // We come into this from chooser change
     const updateTextOutlineColor = (newColor: IColorInfo) => {
-        const color = newColor.colors[0];
+        const color = getPersistedCanvasColor(newColor);
         const canvasElementManager = getCanvasElementManager();
         if (canvasElementManager) {
             setTextOutlineColorIsDefault(false);
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.test.ts b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.test.ts
new file mode 100644
index 000000000000..7106df14f9c4
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+
+import { getPersistedCanvasColor } from "./canvasColorUtils";
+
+describe("getPersistedCanvasColor", () => {
+    test("keeps opaque colors unchanged", () => {
+        expect(
+            getPersistedCanvasColor({
+                colors: ["#123456"],
+                opacity: 1,
+            }),
+        ).toBe("#123456");
+    });
+
+    test("converts partial opacity to rgba for persistence", () => {
+        expect(
+            getPersistedCanvasColor({
+                colors: ["#123456"],
+                opacity: 0.25,
+            }),
+        ).toBe("rgba(18, 52, 86, 0.25)");
+    });
+});
diff --git a/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.ts b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.ts
new file mode 100644
index 000000000000..34e99abfed9c
--- /dev/null
+++ b/src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasColorUtils.ts
@@ -0,0 +1,11 @@
+import { IColorInfo } from "../../../react_components/color-picking/colorSwatch";
+import { getRgbaColorStringFromColorAndOpacity } from "../../../utils/colorUtils";
+
+export function getPersistedCanvasColor(colorInfo: IColorInfo): string {
+    const firstColor = colorInfo.colors[0];
+    if (colorInfo.opacity >= 1) {
+        return firstColor;
+    }
+
+    return getRgbaColorStringFromColorAndOpacity(firstColor, colorInfo.opacity);
+}