diff --git a/frontend/apps/editor3d/app/src/Helpers/CanvasHelpers.ts b/frontend/apps/editor3d/app/src/Helpers/CanvasHelpers.ts index 54a1265ef5..929ab13416 100644 --- a/frontend/apps/editor3d/app/src/Helpers/CanvasHelpers.ts +++ b/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(); +} diff --git a/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx b/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx index 231b60bb22..b4485cc82c 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEdit/PageEdit.tsx +++ b/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}