Compare commits

...
2 changed files with 20 additions and 2 deletions
@@ -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();
}
@@ -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}