diff --git a/ts/routes/image-occlusion/shapes/base.ts b/ts/routes/image-occlusion/shapes/base.ts
index 02a7cb4ec..6dd65f122 100644
--- a/ts/routes/image-occlusion/shapes/base.ts
+++ b/ts/routes/image-occlusion/shapes/base.ts
@@ -49,7 +49,6 @@ export class Shape {
             left: floatToDisplay(this.left),
             top: floatToDisplay(this.top),
             ...(!angle ? {} : { angle: angle.toString() }),
-            ...(this.fill === SHAPE_MASK_COLOR ? {} : { fill: this.fill }),
         };
     }
 
diff --git a/ts/routes/image-occlusion/shapes/ellipse.ts b/ts/routes/image-occlusion/shapes/ellipse.ts
index 05d319be4..2c694f5ec 100644
--- a/ts/routes/image-occlusion/shapes/ellipse.ts
+++ b/ts/routes/image-occlusion/shapes/ellipse.ts
@@ -3,6 +3,7 @@
 
 import { fabric } from "fabric";
 
+import { SHAPE_MASK_COLOR } from "../tools/lib";
 import type { ConstructorParams, Size } from "../types";
 import type { ShapeDataForCloze } from "./base";
 import { Shape } from "./base";
@@ -25,6 +26,7 @@ export class Ellipse extends Shape {
             ...super.toDataForCloze(),
             rx: floatToDisplay(this.rx),
             ry: floatToDisplay(this.ry),
+            ...(this.fill === SHAPE_MASK_COLOR ? {} : { fill: this.fill }),
         };
     }
 
diff --git a/ts/routes/image-occlusion/shapes/polygon.ts b/ts/routes/image-occlusion/shapes/polygon.ts
index c4f8b99b9..c69d7c645 100644
--- a/ts/routes/image-occlusion/shapes/polygon.ts
+++ b/ts/routes/image-occlusion/shapes/polygon.ts
@@ -3,6 +3,7 @@
 
 import { fabric } from "fabric";
 
+import { SHAPE_MASK_COLOR } from "../tools/lib";
 import type { ConstructorParams, Size } from "../types";
 import type { ShapeDataForCloze } from "./base";
 import { Shape } from "./base";
@@ -22,6 +23,7 @@ export class Polygon extends Shape {
         return {
             ...super.toDataForCloze(),
             points: this.points.map(({ x, y }) => `${floatToDisplay(x)},${floatToDisplay(y)}`).join(" "),
+            ...(this.fill === SHAPE_MASK_COLOR ? {} : { fill: this.fill }),
         };
     }
 
diff --git a/ts/routes/image-occlusion/shapes/rectangle.ts b/ts/routes/image-occlusion/shapes/rectangle.ts
index 6b01d3bcc..badfc758c 100644
--- a/ts/routes/image-occlusion/shapes/rectangle.ts
+++ b/ts/routes/image-occlusion/shapes/rectangle.ts
@@ -3,6 +3,7 @@
 
 import { fabric } from "fabric";
 
+import { SHAPE_MASK_COLOR } from "../tools/lib";
 import type { ConstructorParams, Size } from "../types";
 import type { ShapeDataForCloze } from "./base";
 import { Shape } from "./base";
@@ -25,6 +26,7 @@ export class Rectangle extends Shape {
             ...super.toDataForCloze(),
             width: floatToDisplay(this.width),
             height: floatToDisplay(this.height),
+            ...(this.fill === SHAPE_MASK_COLOR ? {} : { fill: this.fill }),
         };
     }
 
diff --git a/ts/routes/image-occlusion/tools/tool-text.ts b/ts/routes/image-occlusion/tools/tool-text.ts
index 76c861461..ff0f94475 100644
--- a/ts/routes/image-occlusion/tools/tool-text.ts
+++ b/ts/routes/image-occlusion/tools/tool-text.ts
@@ -11,6 +11,7 @@ import {
     isPointerInBoundingBox,
     stopDraw,
     TEXT_BACKGROUND_COLOR,
+    TEXT_COLOR,
     TEXT_FONT_FAMILY,
     TEXT_PADDING,
 } from "./lib";
@@ -41,6 +42,7 @@ export const drawText = (canvas: fabric.Canvas, onActivated: Callback): void =>
             selectable: true,
             strokeWidth: 1,
             noScaleCache: false,
+            fill: TEXT_COLOR,
             fontFamily: TEXT_FONT_FAMILY,
             backgroundColor: TEXT_BACKGROUND_COLOR,
             padding: TEXT_PADDING,