Make the inpainting stroke translucent blue (#797)

frontend/apps/editor3d/app/src/Helpers/CanvasHelpers.ts

@@ -13,3 +13,17 @@ export const normalizeCanvas = (canvas: HTMLCanvasElement, width: number, height
   ctx.drawImage(canvas, 0, 0, width, height);
   return newCanvas;
 }
+
+export const drawAlphaMask = (canvas: OffscreenCanvas, width: number, height: number) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  // Fill the entire screen with black and composite to keep non-transparent pixels
+  ctx.save();
+  ctx.globalCompositeOperation = "source-in";
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}

frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx

@@ -10,7 +10,7 @@ import { useUndoRedoHotkeys } from "../PageDraw/hooks/useUndoRedoHotkeys";
 import PromptEditor from "./PromptEditor/PromptEditor";
 import { ActiveEditTool, useEditStore } from "./stores/EditState";
 import { EditPaintSurface } from "./EditPaintSurface";
-import { normalizeCanvas } from "../../Helpers/CanvasHelpers";
+import { drawAlphaMask, normalizeCanvas } from "../../Helpers/CanvasHelpers";
 import { BaseImageSelector, BaseSelectorImage } from "./BaseImageSelector";
 import DrawToolControlBar from "./DrawToolControlBar";
 import {
@@ -187,6 +187,10 @@ const PageEdit = () => {
       rect.height(),
     );
 
+    // Convert colored canvas to alpha mask
+    // NOTE: This isn't needed because the tauri backend uses the alpha channel anyway
+    // drawAlphaMask(fittedCanvas, rect.width(), rect.height());
+
     const blob = await fittedCanvas.convertToBlob({ type: "image/png" });
     const arrayBuffer = await blob.arrayBuffer();
 
@@ -370,7 +374,7 @@ const PageEdit = () => {
             }}
             //fillColor={store.fillColor}
             activeTool={store.activeTool}
-            brushColor={store.brushColor}
+            brushColor={"rgba(39, 187, 245, 0.54)"}
             brushSize={store.brushSize}
             onSelectionChange={setIsSelecting}
             stageRef={stageRef}