apexify.js 4.9.25 → 4.9.27

package/lib/Canvas/utils/Background/bg.ts

@@ -0,0 +1,285 @@
+import { createCanvas, loadImage, SKRSContext2D } from "@napi-rs/canvas";
+import { CanvasConfig, gradient } from "../types";
+import path from "path";
+
+export type AlignMode =
+  | 'center' | 'top' | 'bottom' | 'left' | 'right'
+  | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export type FitMode = 'fill' | 'contain' | 'cover';
+
+/**
+ * Draws a gradient background on the canvas with optional zoom support.
+ * @param ctx The canvas rendering context.
+ * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
+ */
+export async function drawBackgroundGradient(
+  ctx: SKRSContext2D,
+  canvas: CanvasConfig
+) {
+  if (!canvas.gradientBg) return;
+  const width = canvas.width ?? 500;
+  const height = canvas.height ?? 500;
+
+  const grad = buildCanvasGradient(ctx, {
+    gradient: canvas.gradientBg,
+    width, height
+  });
+
+  if (canvas.blur) ctx.filter = `blur(${canvas.blur}px)`;
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, width, height);
+  ctx.filter = 'none';
+}
+
+/**
+ * Draws a solid background color on the canvas with optional zoom effect.
+ * @param ctx The canvas rendering context.
+ * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
+ */
+export async function drawBackgroundColor(
+  ctx: SKRSContext2D,
+  canvas: CanvasConfig
+): Promise<void> {
+  const W = canvas.width ?? 500;
+  const H = canvas.height ?? 500;
+
+  if (canvas.blur) ctx.filter = `blur(${canvas.blur}px)`;
+  if (canvas.colorBg !== 'transparent') {
+    ctx.fillStyle = (canvas.colorBg ?? '#000') as string;
+    ctx.fillRect(0, 0, W, H);
+  }
+  ctx.filter = 'none';
+}
+
+/**
+ * Draws a custom background image on the canvas with optional zoom functionality.
+ * @param ctx The canvas rendering context.
+ * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
+ */
+export async function customBackground(
+  ctx: SKRSContext2D,
+  canvas: CanvasConfig
+): Promise<void> {
+  const cfg = canvas.customBg;
+  if (!cfg) return;
+
+  let imagePath = cfg.source;
+  if (!/^https?:\/\//i.test(imagePath)) {
+    imagePath = path.join(process.cwd(), imagePath);
+  }
+
+  try {
+    const img = await loadImage(imagePath);
+    // Canvas size (createCanvas may have overridden via inherit)
+    const W = canvas.width ?? img.width;
+    const H = canvas.height ?? img.height;
+
+    if (canvas.blur) ctx.filter = `blur(${canvas.blur}px)`;
+
+    if (cfg.inherit) {
+      // Canvas was resized to image size in createCanvas; just draw 1:1
+      ctx.drawImage(img, 0, 0);
+    } else {
+      // scale by fit + align
+      const fit: FitMode = cfg.fit ?? 'fill';
+      let dx = 0, dy = 0, dw = W, dh = H;
+
+      if (fit === 'contain' || fit === 'cover') {
+        const s = fit === 'contain'
+          ? Math.min(W / img.width, H / img.height)
+          : Math.max(W / img.width, H / img.height);
+        dw = img.width * s;
+        dh = img.height * s;
+        // alignment
+        const align: AlignMode = cfg.align ?? 'center';
+        ({ dx, dy } = alignInto(W, H, dw, dh, align));
+      } else {
+        // 'fill' stretches image to exactly W x H (may distort)
+        dx = 0; dy = 0; dw = W; dh = H;
+      }
+
+      ctx.drawImage(img, dx, dy, dw, dh);
+    }
+
+    ctx.filter = 'none';
+  } catch (e: any) {
+    console.error('customBackground: failed to load', e?.message ?? e);
+  }
+}
+
+// helper to place the fitted rect inside canvas by alignment keyword
+function alignInto(
+  W: number, H: number, w: number, h: number, align: AlignMode
+): { dx: number; dy: number } {
+  const cx = (W - w) / 2;
+  const cy = (H - h) / 2;
+  switch (align) {
+    case 'top-left':     return { dx: 0,   dy: 0 };
+    case 'top':          return { dx: cx,  dy: 0 };
+    case 'top-right':    return { dx: W-w, dy: 0 };
+    case 'left':         return { dx: 0,   dy: cy };
+    case 'center':       return { dx: cx,  dy: cy };
+    case 'right':        return { dx: W-w, dy: cy };
+    case 'bottom-left':  return { dx: 0,   dy: H-h };
+    case 'bottom':       return { dx: cx,  dy: H-h };
+    case 'bottom-right': return { dx: W-w, dy: H-h };
+    default:             return { dx: cx,  dy: cy };
+  }
+}
+ 
+
+
+export function buildPathbg(
+  ctx: SKRSContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  borderRadius: number | "circular" = 0,
+  borderPosition: string = "all"
+): void {
+  ctx.beginPath();
+
+  if (borderRadius === "circular") {
+    const r = Math.min(width, height) / 2;
+    ctx.arc(x + width / 2, y + height / 2, r, 0, 2 * Math.PI);
+  } else if (typeof borderRadius === "number" && borderRadius > 0) {
+    const br = Math.min(borderRadius, width / 2, height / 2);
+    const selected = new Set(borderPosition.toLowerCase().split(",").map(s => s.trim()));
+
+    const roundTL = selected.has("all") || selected.has("top-left") || (selected.has("top") && selected.has("left"));
+    const roundTR = selected.has("all") || selected.has("top-right") || (selected.has("top") && selected.has("right"));
+    const roundBR = selected.has("all") || selected.has("bottom-right") || (selected.has("bottom") && selected.has("right"));
+    const roundBL = selected.has("all") || selected.has("bottom-left") || (selected.has("bottom") && selected.has("left"));
+
+    const tl = roundTL ? br : 0;
+    const tr = roundTR ? br : 0;
+    const brR = roundBR ? br : 0;
+    const bl = roundBL ? br : 0;
+
+    ctx.moveTo(x + tl, y);
+    ctx.lineTo(x + width - tr, y);
+    if (tr) ctx.arcTo(x + width, y, x + width, y + tr, tr);
+    ctx.lineTo(x + width, y + height - brR);
+    if (brR) ctx.arcTo(x + width, y + height, x + width - brR, y + height, brR);
+    ctx.lineTo(x + bl, y + height);
+    if (bl) ctx.arcTo(x, y + height, x, y + height - bl, bl);
+    ctx.lineTo(x, y + tl);
+    if (tl) ctx.arcTo(x, y, x + tl, y, tl);
+  } else {
+    ctx.rect(x, y, width, height);
+  }
+
+  ctx.closePath();
+}
+
+
+
+export function applyNoise(ctx: SKRSContext2D, width: number, height: number, intensity = 0.05) {
+  const noiseCanvas = createCanvas(width, height);
+  const nctx = noiseCanvas.getContext("2d");
+  const imageData = nctx.createImageData(width, height);
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    const v = (Math.random() * 255) | 0;
+    imageData.data[i]   = v;
+    imageData.data[i+1] = v;
+    imageData.data[i+2] = v;
+    imageData.data[i+3] = 255 * intensity;
+  }
+  nctx.putImageData(imageData, 0, 0);
+  ctx.drawImage(noiseCanvas, 0, 0);
+}
+
+export async function drawPattern(
+  ctx: SKRSContext2D,
+  { source, repeat = "repeat", opacity = 1 }: { source: string; repeat?: 'repeat'|'repeat-x'|'repeat-y'|'no-repeat'; opacity?: number },
+  width: number,
+  height: number
+) {
+  const img = await loadImage(source);
+  const pattern = ctx.createPattern(img, repeat);
+  if (!pattern) return;
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.fillStyle = pattern as any;
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}
+
+function rotatePoint(
+  x: number, y: number,
+  pivotX: number, pivotY: number,
+  deg: number
+): [number, number] {
+  if (!deg) return [x, y];
+  const a = (deg * Math.PI) / 180;
+  const dx = x - pivotX, dy = y - pivotY;
+  const rx = dx * Math.cos(a) - dy * Math.sin(a);
+  const ry = dx * Math.sin(a) + dy * Math.cos(a);
+  return [pivotX + rx, pivotY + ry];
+}
+
+export function applyCanvasZoom(
+  ctx: SKRSContext2D,
+  width: number,
+  height: number,
+  zoom?: { scale?: number; centerX?: number; centerY?: number }
+) {
+  if (!zoom) return;
+
+  const scale = zoom.scale ?? 1;
+  if (scale === 1) return; // nothing to do
+
+  const cx = zoom.centerX ?? width / 2;
+  const cy = zoom.centerY ?? height / 2;
+
+  ctx.translate(cx, cy);
+  ctx.scale(scale, scale);
+  ctx.translate(-cx, -cy);
+}
+
+
+export function buildCanvasGradient(
+  ctx: SKRSContext2D,
+  cfg: { gradient: gradient; width: number; height: number }
+): CanvasGradient {
+  const { gradient, width, height } = cfg;
+
+  if (gradient.type === 'linear') {
+    const {
+      startX = 0, startY = 0,
+      endX   = width, endY   = 0,
+      rotate = 0,
+      pivotX = width/2, pivotY = height/2,
+      colors
+    } = gradient;
+
+    const [sx, sy] = rotatePoint(startX, startY, pivotX, pivotY, rotate);
+    const [ex, ey] = rotatePoint(endX,   endY,   pivotX, pivotY, rotate);
+
+    const g = ctx.createLinearGradient(sx, sy, ex, ey);
+    for (const { stop, color } of colors) g.addColorStop(stop, color);
+    return g;
+  }
+
+  // radial
+  const {
+    startX = width/2,  startY = height/2,  startRadius = 0,
+    endX   = width/2,  endY   = height/2,  endRadius   = Math.max(width, height)/2,
+    rotate = 0,
+    pivotX = width/2,  pivotY = height/2,
+    colors
+  } = gradient;
+
+  // If centers differ, rotation will rotate both centers around pivot.
+  const [sx, sy] = rotatePoint(startX, startY, pivotX, pivotY, rotate);
+  const [ex, ey] = rotatePoint(endX,   endY,   pivotX, pivotY, rotate);
+
+  const g = ctx.createRadialGradient(sx, sy, startRadius, ex, ey, endRadius);
+  for (const { stop, color } of colors) g.addColorStop(stop, color);
+  return g;
+}

package/lib/{canvas → Canvas}/utils/Custom/customLines.ts

@@ -1,4 +1,4 @@
-import { createGradient } from "../Image/imageProperties";
+import { createGradientFill } from "../Image/imageProperties";
 import { CustomOptions } from "../types";
 
 export function customLines(ctx: any, options: CustomOptions[]) {
@@ -40,7 +40,7 @@ export function customLines(ctx: any, options: CustomOptions[]) {
         ctx.lineWidth = appliedStyle?.width || 1;
 
         if (appliedStyle?.gradient) {
-            ctx.strokeStyle = createGradient(ctx, appliedStyle.gradient, start.x, start.y, endCoordinates.x, endCoordinates.y);
+            ctx.strokeStyle = createGradientFill(ctx, appliedStyle.gradient, { x: start.x, y: start.y, w: endCoordinates.x - start.x, h: endCoordinates.y - start.y });
         } else {
             ctx.strokeStyle = appliedStyle?.color || 'black';
         }
@@ -104,7 +104,7 @@ function applyStroke(ctx: any, style: any, start: any, end: any) {
         const prevLineCap = ctx.lineCap;
 
         if (gradient) {
-            ctx.strokeStyle = createGradient(ctx, gradient, start.x, start.y, end.x, end.y);
+            ctx.strokeStyle = createGradientFill(ctx, gradient, { x: start.x, y: start.y, w: end.x - start.x, h: end.y - start.y });
         } else {
             ctx.strokeStyle = color || prevStrokeStyle;
         }

package/lib/Canvas/utils/Image/imageFilters.ts

@@ -0,0 +1,356 @@
+import { SKRSContext2D } from '@napi-rs/canvas';
+import { ImageFilter } from '../types';
+
+/**
+ * Applies image filters to a canvas context
+ * @param ctx Canvas 2D context
+ * @param filters Array of filters to apply
+ * @param width Canvas width
+ * @param height Canvas height
+ */
+export function applyImageFilters(
+  ctx: SKRSContext2D,
+  filters: ImageFilter[],
+  width: number,
+  height: number
+): void {
+  if (!filters || filters.length === 0) return;
+
+  ctx.save();
+
+  for (const filter of filters) {
+    switch (filter.type) {
+      case 'gaussianBlur':
+        applyGaussianBlur(ctx, filter.intensity || 0);
+        break;
+      case 'motionBlur':
+        applyMotionBlur(ctx, filter.intensity || 0, filter.angle || 0);
+        break;
+      case 'radialBlur':
+        applyRadialBlur(ctx, filter.intensity || 0, filter.centerX || width/2, filter.centerY || height/2);
+        break;
+      case 'sharpen':
+        applySharpen(ctx, filter.intensity || 0);
+        break;
+      case 'noise':
+        applyNoise(ctx, filter.intensity || 0.1);
+        break;
+      case 'grain':
+        applyGrain(ctx, filter.intensity || 0.05);
+        break;
+      case 'edgeDetection':
+        applyEdgeDetection(ctx, filter.intensity || 1);
+        break;
+      case 'emboss':
+        applyEmboss(ctx, filter.intensity || 1);
+        break;
+      case 'invert':
+        applyInvert(ctx);
+        break;
+      case 'grayscale':
+        applyGrayscale(ctx);
+        break;
+      case 'sepia':
+        applySepia(ctx);
+        break;
+      case 'pixelate':
+        applyPixelate(ctx, filter.size || 10);
+        break;
+      case 'brightness':
+        applyBrightness(ctx, filter.value || 0);
+        break;
+      case 'contrast':
+        applyContrast(ctx, filter.value || 0);
+        break;
+      case 'saturation':
+        applySaturation(ctx, filter.value || 0);
+        break;
+      case 'hueShift':
+        applyHueShift(ctx, filter.value || 0);
+        break;
+      case 'posterize':
+        applyPosterize(ctx, filter.levels || 4);
+        break;
+    }
+  }
+
+  ctx.restore();
+}
+
+// Individual filter implementations
+function applyGaussianBlur(ctx: SKRSContext2D, intensity: number): void {
+  if (intensity > 0) {
+    ctx.filter = `blur(${intensity}px)`;
+  }
+}
+
+function applyMotionBlur(ctx: SKRSContext2D, intensity: number, angle: number): void {
+  if (intensity > 0) {
+    // Motion blur is approximated with directional blur
+    const radians = (angle * Math.PI) / 180;
+    const blurX = Math.cos(radians) * intensity;
+    const blurY = Math.sin(radians) * intensity;
+    ctx.filter = `blur(${Math.abs(blurX)}px ${Math.abs(blurY)}px)`;
+  }
+}
+
+function applyRadialBlur(ctx: SKRSContext2D, intensity: number, centerX: number, centerY: number): void {
+  if (intensity > 0) {
+    // Radial blur is approximated with multiple directional blurs
+    ctx.filter = `blur(${intensity}px)`;
+  }
+}
+
+function applySharpen(ctx: SKRSContext2D, intensity: number): void {
+  if (intensity > 0) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    
+    // Create a copy for the sharpening kernel
+    const originalData = new Uint8ClampedArray(data);
+    
+    // Apply sharpening kernel
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const idx = (y * width + x) * 4;
+        
+        // Sharpening kernel: [[0,-1,0],[-1,5,-1],[0,-1,0]]
+        let r = 0, g = 0, b = 0;
+        
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const kidx = ((y + ky) * width + (x + kx)) * 4;
+            const kernelValue = (ky === 0 && kx === 0) ? 5 : -1;
+            
+            r += originalData[kidx] * kernelValue;
+            g += originalData[kidx + 1] * kernelValue;
+            b += originalData[kidx + 2] * kernelValue;
+          }
+        }
+        
+        // Apply intensity
+        data[idx] = Math.max(0, Math.min(255, originalData[idx] + (r - originalData[idx]) * intensity));
+        data[idx + 1] = Math.max(0, Math.min(255, originalData[idx + 1] + (g - originalData[idx + 1]) * intensity));
+        data[idx + 2] = Math.max(0, Math.min(255, originalData[idx + 2] + (b - originalData[idx + 2]) * intensity));
+      }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+
+function applyNoise(ctx: SKRSContext2D, intensity: number): void {
+  if (intensity > 0) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    
+    for (let i = 0; i < data.length; i += 4) {
+      const noise = (Math.random() - 0.5) * intensity * 255;
+      data[i] = Math.max(0, Math.min(255, data[i] + noise));     // R
+      data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise)); // G
+      data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise)); // B
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+
+function applyGrain(ctx: SKRSContext2D, intensity: number): void {
+  if (intensity > 0) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    
+    for (let i = 0; i < data.length; i += 4) {
+      const grain = (Math.random() - 0.5) * intensity * 100;
+      data[i] = Math.max(0, Math.min(255, data[i] + grain));     // R
+      data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + grain)); // G
+      data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + grain)); // B
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+
+function applyEdgeDetection(ctx: SKRSContext2D, intensity: number): void {
+  if (intensity > 0) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    
+    // Create a copy for the edge detection kernel
+    const originalData = new Uint8ClampedArray(data);
+    
+    // Apply Sobel edge detection kernel
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const idx = (y * width + x) * 4;
+        
+        // Sobel X kernel: [[-1,0,1],[-2,0,2],[-1,0,1]]
+        // Sobel Y kernel: [[-1,-2,-1],[0,0,0],[1,2,1]]
+        let gx = 0, gy = 0;
+        
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const kidx = ((y + ky) * width + (x + kx)) * 4;
+            const gray = (originalData[kidx] + originalData[kidx + 1] + originalData[kidx + 2]) / 3;
+            
+            const sobelX = (kx === -1) ? -1 : (kx === 0) ? 0 : 1;
+            const sobelY = (ky === -1) ? -1 : (ky === 0) ? 0 : 1;
+            
+            gx += gray * sobelX;
+            gy += gray * sobelY;
+          }
+        }
+        
+        const magnitude = Math.sqrt(gx * gx + gy * gy) * intensity;
+        const edgeValue = Math.min(255, magnitude);
+        
+        data[idx] = edgeValue;     // R
+        data[idx + 1] = edgeValue; // G
+        data[idx + 2] = edgeValue; // B
+      }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+
+function applyEmboss(ctx: SKRSContext2D, intensity: number): void {
+  if (intensity > 0) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    
+    // Create a copy for the emboss kernel
+    const originalData = new Uint8ClampedArray(data);
+    
+    // Apply emboss kernel
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const idx = (y * width + x) * 4;
+        
+        // Emboss kernel: [[-2,-1,0],[-1,1,1],[0,1,2]]
+        let r = 0, g = 0, b = 0;
+        
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const kidx = ((y + ky) * width + (x + kx)) * 4;
+            let kernelValue = 0;
+            
+            if (ky === -1 && kx === -1) kernelValue = -2;
+            else if (ky === -1 && kx === 0) kernelValue = -1;
+            else if (ky === -1 && kx === 1) kernelValue = 0;
+            else if (ky === 0 && kx === -1) kernelValue = -1;
+            else if (ky === 0 && kx === 0) kernelValue = 1;
+            else if (ky === 0 && kx === 1) kernelValue = 1;
+            else if (ky === 1 && kx === -1) kernelValue = 0;
+            else if (ky === 1 && kx === 0) kernelValue = 1;
+            else if (ky === 1 && kx === 1) kernelValue = 2;
+            
+            r += originalData[kidx] * kernelValue;
+            g += originalData[kidx + 1] * kernelValue;
+            b += originalData[kidx + 2] * kernelValue;
+          }
+        }
+        
+        // Apply intensity and add 128 for emboss effect
+        data[idx] = Math.max(0, Math.min(255, 128 + r * intensity));
+        data[idx + 1] = Math.max(0, Math.min(255, 128 + g * intensity));
+        data[idx + 2] = Math.max(0, Math.min(255, 128 + b * intensity));
+      }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+
+function applyInvert(ctx: SKRSContext2D): void {
+  ctx.filter = 'invert(100%)';
+}
+
+function applyGrayscale(ctx: SKRSContext2D): void {
+  ctx.filter = 'grayscale(100%)';
+}
+
+function applySepia(ctx: SKRSContext2D): void {
+  ctx.filter = 'sepia(100%)';
+}
+
+function applyPixelate(ctx: SKRSContext2D, size: number): void {
+  if (size > 1) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    
+    // Create pixelated version
+    for (let y = 0; y < height; y += size) {
+      for (let x = 0; x < width; x += size) {
+        // Get average color of the block
+        let r = 0, g = 0, b = 0, count = 0;
+        
+        for (let dy = 0; dy < size && y + dy < height; dy++) {
+          for (let dx = 0; dx < size && x + dx < width; dx++) {
+            const idx = ((y + dy) * width + (x + dx)) * 4;
+            r += data[idx];
+            g += data[idx + 1];
+            b += data[idx + 2];
+            count++;
+          }
+        }
+        
+        r = Math.round(r / count);
+        g = Math.round(g / count);
+        b = Math.round(b / count);
+        
+        // Apply the average color to the entire block
+        for (let dy = 0; dy < size && y + dy < height; dy++) {
+          for (let dx = 0; dx < size && x + dx < width; dx++) {
+            const idx = ((y + dy) * width + (x + dx)) * 4;
+            data[idx] = r;
+            data[idx + 1] = g;
+            data[idx + 2] = b;
+          }
+        }
+      }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}
+
+function applyBrightness(ctx: SKRSContext2D, value: number): void {
+  ctx.filter = `brightness(${100 + value}%)`;
+}
+
+function applyContrast(ctx: SKRSContext2D, value: number): void {
+  ctx.filter = `contrast(${100 + value}%)`;
+}
+
+function applySaturation(ctx: SKRSContext2D, value: number): void {
+  ctx.filter = `saturate(${100 + value}%)`;
+}
+
+function applyHueShift(ctx: SKRSContext2D, value: number): void {
+  ctx.filter = `hue-rotate(${value}deg)`;
+}
+
+function applyPosterize(ctx: SKRSContext2D, levels: number): void {
+  if (levels > 1) {
+    const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+    const data = imageData.data;
+    const step = 255 / (levels - 1);
+    
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = Math.round(data[i] / step) * step;     // R
+      data[i + 1] = Math.round(data[i + 1] / step) * step; // G
+      data[i + 2] = Math.round(data[i + 2] / step) * step; // B
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+  }
+}