apexify.js 4.9.26 → 4.9.28

package/lib/Canvas/ApexPainter.ts

@@ -1,1219 +1,1326 @@
-import { createCanvas, loadImage, GlobalFonts, Image, SKRSContext2D  } from "@napi-rs/canvas";
-import GIFEncoder from "gifencoder";
-import ffmpeg from 'fluent-ffmpeg';
-import { PassThrough} from "stream";
-import axios from 'axios';
-import fs, { PathLike } from "fs";
-import path from "path";
-import { OutputFormat, CanvasConfig, TextObject, ImageProperties, GIFOptions, GIFResults, CustomOptions, cropOptions,
-     drawBackgroundGradient, drawBackgroundColor, customBackground, customLines, applyRotation, applyStroke,
-     applyShadow, imageRadius, drawShape, drawText, converter, resizingImg, applyColorFilters, imgEffects,verticalBarChart, pieChart,
-     lineChart, cropInner, cropOuter, bgRemoval, detectColors, removeColor, dataURL, base64, arrayBuffer, blob, url, GradientConfig, Frame,
-     PatternOptions, ExtractFramesOptions, backgroundRadius, applyZoom, ResizeOptions, applyPerspective, MaskOptions, BlendOptions
-    } from "./utils/utils";
-
-  interface CanvasResults {
-    buffer: Buffer;
-    canvas: CanvasConfig;
-  }
-  
-export class ApexPainter {
-  private format?: OutputFormat;
-
-  constructor({ type }: OutputFormat = { type: 'buffer' }) {
-    this.format = { type: type || 'buffer' };
-  }
-
-  /**
-   * Creates a canvas with the given configuration.
-   * Applies rotation, shadow, border effects, background, and stroke.
-   *
-   * @param canvas - The configuration options for the canvas.
-   * @returns A promise that resolves to an object containing the image buffer and the canvas config.
-   * @throws If the 2D context cannot be retrieved.
-   */
-  async createCanvas(canvas: CanvasConfig): Promise<CanvasResults> {
-    const {
-      width = 500,
-      height = 500,
-      x = 0,
-      y = 0,
-      rotation = 0,
-      borderRadius = 0,
-      customBg,
-      gradientBg,
-      stroke,
-      shadow,
-      borderPosition = 'all',
-      opacity = 1,
-      zoom,
-      blur
-    } = canvas;
-  
-    const canvasInstance = createCanvas(width, height);
-    const ctx = canvasInstance.getContext('2d') as SKRSContext2D | null;
-    if (!ctx) {
-      throw new Error('Unable to get 2D rendering context from canvas');
-    }
-  
-    ctx.globalAlpha = opacity;
-
-    applyRotation(ctx, rotation, x, y, width, height);
-    applyShadow(ctx, shadow, x, y, width, height);
-  
-    ctx.save();
-    if (borderRadius) {
-      backgroundRadius(ctx, x, y, width, height, borderRadius, borderPosition);
-    }
-
-    ctx.translate(x, y);
-
-    if (customBg) {
-      await customBackground(ctx, canvas, zoom, blur);
-    } else if (gradientBg) {
-      await drawBackgroundGradient(ctx, canvas, zoom, blur);
-    } else {
-      await drawBackgroundColor(ctx, canvas, zoom, blur);
-    }
-
-    ctx.restore();
-
-    applyStroke(ctx, stroke, x, y, width, height);
-
-    return { buffer: canvasInstance.toBuffer('image/png'), canvas };
-  }
-
-  /**
-   * Draws one or more images (or shapes) on an existing canvas buffer.
-   * @param images - A single image properties object or an array of them.
-   * @param canvasBuffer - A Buffer or a CanvasResults object containing a buffer.
-   * @returns A promise that resolves to a Buffer representing the updated canvas.
-   */
-  async createImage(
-    images: ImageProperties | ImageProperties[],
-    canvasBuffer: CanvasResults | Buffer
-  ): Promise<Buffer> {
-
-    if (!Array.isArray(images)) {
-      images = [images];
-    }
-    
-    let baseImage: Image;
-    
-    if (Buffer.isBuffer(canvasBuffer)) {
-      baseImage = await loadImage(canvasBuffer);
-    } else if ((canvasBuffer as CanvasResults).buffer) {
-      baseImage = await loadImage((canvasBuffer as CanvasResults).buffer);
-    } else {
-      throw new Error('Invalid canvasBuffer provided; expected Buffer or CanvasResults with a buffer');
-    }
-    
-    if (!baseImage) {
-      throw new Error('Unable to load base image from the provided buffer');
-    }
-    
-    const canvas = createCanvas(baseImage.width, baseImage.height);
-    const ctx = canvas.getContext('2d') as SKRSContext2D | null;
-
-    if (!ctx) {
-      throw new Error('Unable to get 2D rendering context from canvas');
-    }
-    
-    ctx.drawImage(baseImage, 0, 0);
-    
-    for (const imageProps of images) {
-      await this.drawImage(ctx, imageProps);
-    }
-    
-    return canvas.toBuffer('image/png');
-  }
-
-  async createText(textOptionsArray: TextObject[], buffer: CanvasResults | Buffer ): Promise<Buffer> {
-    try {
-
-      if (!Array.isArray(textOptionsArray)) {
-        textOptionsArray = [textOptionsArray];
-      }
-
-        let existingImage: any;
-        
-        if (Buffer.isBuffer(buffer)) {
-          existingImage = await loadImage(buffer);
-        } else if (buffer && buffer.buffer) {
-          existingImage = await loadImage(buffer.buffer);
-        } else {
-          throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
-        }
-
-        if (!existingImage) {
-          throw new Error('Unable to load image from buffer');
-        }
-
-        const canvas = createCanvas(existingImage.width, existingImage.height);
-        const ctx = canvas.getContext("2d");
-
-        ctx.drawImage(existingImage, 0, 0);
-
-        for (const textOptions of textOptionsArray) {
-            const mergedTextOptions = textOptions;
-
-            if (mergedTextOptions.fontPath) {
-               
-                GlobalFonts.registerFromPath(
-                  path.join(process.cwd(), mergedTextOptions.fontPath),
-                    (mergedTextOptions.fontName || 'customFont'),
-                );
-            }
-
-            drawText(ctx, mergedTextOptions);
-        }
-
-        return canvas.toBuffer("image/png");
-    } catch (error) {
-        console.error("Error loading existing image:", error);
-        throw new Error("Invalid image buffer");
-    }
-  }
-
-
-
-  async createCustom(options: CustomOptions[], buffer: CanvasResults | Buffer, ): Promise<Buffer> {
-    try {
-
-      if (!Array.isArray(options)) {
-        options = [options];
-      }
-
-      let existingImage: any;
-        
-      if (Buffer.isBuffer(buffer)) {
-        existingImage = await loadImage(buffer);
-      } else if (buffer && buffer.buffer) {
-        existingImage = await loadImage(buffer.buffer);
-      } else {
-        throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
-      }
-
-      if (!existingImage) {
-        throw new Error('Unable to load image from buffer');
-      }
-
-      const canvas = createCanvas(existingImage.width, existingImage.height);
-      const ctx = canvas.getContext("2d");
-
-      ctx.drawImage(existingImage, 0, 0);
-
-      customLines(ctx, options);
-
-      return canvas.toBuffer("image/png");
-    } catch (error) {
-        console.error("Error creating custom image:", error);
-        throw new Error("Failed to create custom image");
-    }
-}
-
-async createGIF(gifFrames: { background: string; duration: number }[], options: GIFOptions): Promise<GIFResults | any> {
-  async function resizeImage(image: any, targetWidth: number, targetHeight: number) {
-      const canvas = createCanvas(targetWidth, targetHeight);
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
-      return canvas;
-  }
-
-  function createOutputStream(outputFile: string): fs.WriteStream {
-      return fs.createWriteStream(outputFile);
-  }
-
-  function createBufferStream() {
-      const bufferStream = new PassThrough();
-      const chunks: Buffer[] = [];
-  
-      bufferStream.on('data', (chunk: Buffer) => {
-          chunks.push(chunk);
-      });
-  
-      return {
-          ...bufferStream,
-          getBuffer: function (): Buffer {
-              return Buffer.concat(chunks);
-          }
-      } as any;
-  }
-
-  function validateOptions(options: GIFOptions) {
-      if (options.outputFormat === "file" && !options.outputFile) {
-          throw new Error("Output file path is required when using file output format.");
-      }
-      if (options.repeat !== undefined && (typeof options.repeat !== "number" || options.repeat < 0)) {
-          throw new Error("Repeat must be a non-negative number or undefined.");
-      }
-      if (options.quality !== undefined && (typeof options.quality !== "number" || options.quality < 1 || options.quality > 20)) {
-          throw new Error("Quality must be a number between 1 and 20 or undefined.");
-      }
-      if (options.watermark && typeof options.watermark.enable !== "boolean") {
-          throw new Error("Watermark must be a boolean or undefined.");
-      }
-      if (options.textOverlay) {
-          const textOptions = options.textOverlay;
-          if (!textOptions.text || typeof textOptions.text !== "string") {
-              throw new Error("Text overlay text is required and must be a string.");
-          }
-          if (textOptions.fontSize !== undefined && (!Number.isInteger(textOptions.fontSize) || textOptions.fontSize <= 0)) {
-              throw new Error("Text overlay fontSize must be a positive integer or undefined.");
-          }
-          if (textOptions.fontColor !== undefined && typeof textOptions.fontColor !== "string") {
-              throw new Error("Text overlay fontColor must be a string or undefined.");
-          }
-      }
-  }
-
-  try {
-      validateOptions(options);
-  
-      const canvasWidth = options.width || 1200;
-      const canvasHeight = options.height || 1200;
-
-      const encoder = new GIFEncoder(canvasWidth, canvasHeight);
-      const outputStream = options.outputFile ? createOutputStream(options.outputFile) : createBufferStream();
-      
-      encoder.createReadStream().pipe(outputStream);
-      
-      encoder.start();
-      encoder.setRepeat(options.repeat || 0);
-      encoder.setQuality(options.quality || 10);
-
-      const canvas = createCanvas(canvasWidth, canvasHeight);
-      const ctx:any = canvas.getContext("2d");
-      
-      for (const frame of gifFrames) {
-          const image = await loadImage(frame.background);
-          const resizedImage = await resizeImage(image, canvasWidth, canvasHeight);
-          
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-          ctx.drawImage(resizedImage, 0, 0);
-          
-          if (options.watermark?.enable) {
-              const watermark = await loadImage(options.watermark.url);
-              ctx.drawImage(watermark, 10, canvasHeight - watermark.height - 10);
-          }
-          
-          if (options.textOverlay) {
-              ctx.font = `${options.textOverlay.fontSize || 20}px Arial`;
-              ctx.fillStyle = options.textOverlay.fontColor || "white";
-              ctx.fillText(options.textOverlay.text, options.textOverlay.x || 10, options.textOverlay.y || 30);
-          }
-
-          encoder.setDelay(frame.duration);
-          encoder.addFrame(ctx);
-      }
-      
-      encoder.finish();
-      outputStream.end();
-      
-      if (options.outputFormat === "file") {
-          await new Promise((resolve) => outputStream.on("finish", resolve));
-      } else if (options.outputFormat === "base64") {
-          if ('getBuffer' in outputStream) {
-              return outputStream.getBuffer().toString("base64");
-          }
-      } else if (options.outputFormat === "attachment") {
-          const gifStream = encoder.createReadStream();
-          return [{ attachment: gifStream, name: "gif.js" }];
-      } else if (options.outputFormat === "buffer") {
-          if ('getBuffer' in outputStream) {
-              return outputStream.getBuffer();
-          }
-      } else {
-          throw new Error("Invalid output format. Supported formats are 'file', 'base64', 'attachment', and 'buffer'.");
-      }
-  } catch (e: any) {
-      console.error(e.message);
-      throw e;
-  }
-}
-
-  async resize(resizeOptions: ResizeOptions) {
-    return resizingImg(resizeOptions)
-  }
-
-  async imgConverter(source: string, newExtension: string) {
-    return converter(source, newExtension)
-  }
-
-  async effects(source: string, filters: any[]) {
-    return imgEffects(source, filters)
-  }
-
-  async colorsFilter(source: string, filterColor: any, opacity?: number) {
-    return applyColorFilters(source, filterColor, opacity)
-  }
-
-  async colorAnalysis(source: string) {
-    return detectColors(source)
-  }
-
-  async colorsRemover(source: string, colorToRemove: { red: number, green: number, blue: number }) {
-    return removeColor(source, colorToRemove)
-  }
-
-  async removeBackground(imageURL: string, apiKey: string) {
-    return bgRemoval(imageURL, apiKey)
-  }
-
-  async blend(
-    layers: {
-      image: string | Buffer;
-      blendMode: 'source-over' | 'source-in' | 'source-out' | 'source-atop' |
-                 'destination-over' | 'destination-in' | 'destination-out' |
-                 'destination-atop' | 'lighter' | 'copy' | 'xor' |
-                 'multiply' | 'screen' | 'overlay' | 'darken' |
-                 'lighten' | 'color-dodge' | 'color-burn' |
-                 'hard-light' | 'soft-light' | 'difference' | 'exclusion' |
-                 'hue' | 'saturation' | 'color' | 'luminosity';
-      position?: { x: number; y: number };
-      opacity?: number;
-    }[],
-    baseImageBuffer: Buffer,
-    defaultBlendMode: 'source-over' | 'source-in' | 'source-out' | 'source-atop' |
-                      'destination-over' | 'destination-in' | 'destination-out' |
-                      'destination-atop' | 'lighter' | 'copy' | 'xor' |
-                      'multiply' | 'screen' | 'overlay' | 'darken' |
-                      'lighten' | 'color-dodge' | 'color-burn' |
-                      'hard-light' | 'soft-light' | 'difference' | 'exclusion' |
-                      'hue' | 'saturation' | 'color' | 'luminosity' = 'source-over'
-  ): Promise<Buffer> {
-    try {
-      const baseImage = await loadImage(baseImageBuffer);
-      const canvas = createCanvas(baseImage.width, baseImage.height);
-      const ctx = canvas.getContext('2d');
-  
-      ctx.globalCompositeOperation = defaultBlendMode;
-      ctx.drawImage(baseImage, 0, 0);
-  
-      for (const layer of layers) {
-        const layerImage = await loadImage(layer.image);
-        ctx.globalAlpha = layer.opacity !== undefined ? layer.opacity : 1.0;
-  
-        ctx.globalCompositeOperation = layer.blendMode;
-        ctx.drawImage(layerImage, layer.position?.x || 0, layer.position?.y || 0);
-      }
-  
-      ctx.globalAlpha = 1.0;
-      ctx.globalCompositeOperation = defaultBlendMode; // Reset to user-defined default
-  
-      return canvas.toBuffer('image/png');
-    } catch (error) {
-      console.error('Error creating layered composition:', error);
-      throw new Error('Failed to create layered composition');
-    }
-  }
-  
-
-  async createChart(data: any, type: { chartType: string, chartNumber: number}) {
-
-    if (!data || Object.keys(data).length === 0) {
-        throw new Error('You need to provide datasets to create charts.');
-    }
-
-    if (!type || !type.chartNumber || !type.chartType) {
-        throw new Error('Type arguments are missing.');
-    }
-
-    const { chartType, chartNumber } = type;
-
-    switch (chartType.toLowerCase()) {
-        case 'bar':
-            switch (chartNumber) {
-                case 1:
-                    return await verticalBarChart(data);
-                case 2:
-                    throw new Error('Type 2 is still under development.');
-                default:
-                    throw new Error('Invalid chart number for chart type "bar".');
-            }
-        case 'line':
-            switch (chartNumber) {
-                case 1:
-                    return await lineChart(data);
-                case 2:
-                    throw new Error('Type 2 is still under development.');
-                default:
-                    throw new Error('Invalid chart number for chart type "line".');
-            }
-        case 'pie':
-            switch (chartNumber) {
-                case 1:
-                    return await pieChart(data);
-                case 2:
-                    throw new Error('Type 2 is still under development.');
-                default:
-                    throw new Error('Invalid chart number for chart type "pie".');
-            }
-        default:
-            throw new Error(`Unsupported chart type "${chartType}".`);
-    }
-  }
-
-
-  async  cropImage(options: cropOptions): Promise<Buffer> {
-    try {
-      if (!options.imageSource) throw new Error('The "imageSource" option is needed. Please provide the path to the image to crop.');
-      if (!options.coordinates || options.coordinates.length < 3) throw new Error('The "coordinates" option is needed. Please provide coordinates to crop the image.');
-
-      if (options.crop === 'outer') {
-          return await cropOuter(options);
-      } else if (options.crop === 'inner') {
-          return await cropInner(options);
-      } else {
-          throw new Error('Invalid crop option. Please specify "inner" or "outer".');
-      }
-    } catch (error) {
-      console.error('An error occurred:', error);
-      throw error;
-    }
-  }
-
-  private async drawImage(ctx: SKRSContext2D, image: ImageProperties): Promise<void> {
-    const {
-      source,
-      x, y, width, height,
-      rotation = 0,
-      borderRadius = 0,
-      stroke, shadow,
-      isFilled, color, gradient,
-      borderPosition = 'all',
-      opacity,
-      perspective,
-      blur = 0,
-      zoom,
-      filling
-    } = image;
-    
-    if (perspective) throw new Error("`perspective` Feature is under construction. Please refrain from using it.");
-    
-    if (!source || typeof x !== 'number' || typeof y !== 'number' || typeof width !== 'number' || typeof height !== 'number') {
-      throw new Error('Invalid image properties: source, x, y, width, and height are required.');
-    }
-  
-    const shapeNames = ['circle', 'square', 'triangle', 'pentagon', 'hexagon', 'heptagon', 'octagon', 'star', 'kite', 'arrow', 'star', 'oval', 'heart', 'diamond', 'trapezoid', 'cloud'];
-    const isShape = shapeNames.includes(source.toLowerCase());
-  
-
-    if (isShape) {
-      drawShape(ctx, { source, x, y, width, height, opacity, rotation, borderRadius, stroke, shadow, isFilled, color, gradient, borderPosition, filling });
-      return;
-    }
-  
-    let loadedImage: Image | undefined;
-    try {
-      if (source.startsWith('http')) {
-        loadedImage = await loadImage(source);
-      } else {
-        const imagePath = path.resolve(process.cwd(), source);
-        loadedImage = await loadImage(imagePath);
-      }
-    } catch (e: any) {
-      throw new Error(`Error loading image: ${e.message}`);
-    }
-  
-    if (!loadedImage) {
-      throw new Error('Invalid image source or failed to load image');
-    }
-  
-    ctx.save();
-  
-    const scale = zoom?.scale ?? 1;
-    const focusX = zoom?.x ?? 0.5;
-    const focusY = zoom?.y ?? 0.5;
-  
-    if (scale !== 1) {
-      ctx.translate(focusX, focusY);
-      ctx.scale(scale, scale);
-    }
-  
-    if (opacity !== undefined) {
-      ctx.globalAlpha = opacity;
-    }
-  
-    if (blur > 0) {
-      ctx.filter = `blur(${blur}px)`;
-    }
-  
-    applyRotation(ctx, rotation, x, y, width, height);
-    applyShadow(ctx, shadow, x, y, width, height);
-    
-    if (perspective) {
-      throw new Error('Under construction');
-    }
-  
-    imageRadius(ctx, loadedImage, x, y, width, height, borderRadius, borderPosition);
-    ctx.globalAlpha = 1.0;
-
-    if (stroke?.opacity) ctx.globalAlpha = stroke.opacity as number;
-
-    applyStroke(ctx, stroke, x, y, width, height, undefined);
-    ctx.globalAlpha = 1.0;
-
-    ctx.restore();
-  }
-  
-
-async extractFrames(videoSource: string | Buffer, options: ExtractFramesOptions): Promise<any[]> {
-  const frames: any[]= [];
-  const frameDir = path.join(__dirname, 'frames');
-
-  if (!fs.existsSync(frameDir)) {
-      fs.mkdirSync(frameDir);
-  }
-
-  const videoPath = typeof videoSource === 'string' ? videoSource : path.join(frameDir, 'temp-video.mp4');
-
-  if (Buffer.isBuffer(videoSource)) {
-      fs.writeFileSync(videoPath, videoSource);
-  } else if (videoSource.startsWith('http')) {
-      await axios({
-          method: 'get',
-          url: videoSource,
-          responseType: 'arraybuffer'
-      })
-      .then((response) => {
-          fs.writeFileSync(videoPath, response.data);
-      })
-      .catch(err => {
-          throw new Error(`Error downloading video: ${err.message}`);
-      });
-  } else if (!fs.existsSync(videoPath)) {
-      throw new Error("Video file not found at specified path.");
-  }
-
-  function processVideoExtraction(videoPath: string, frames: any[], options: ExtractFramesOptions, resolve: any, reject: any) {
-      const outputFormat = options.outputFormat || 'jpg';
-      const outputFileTemplate = `frame-%03d.${outputFormat}`;
-
-      ffmpeg(videoPath)
-          .on('end', () => {
-              console.log('Frames extracted successfully.');
-              resolve(frames);
-          })
-          .on('error', (err: { message: any; }) => {
-              console.error('Error extracting frames:', err.message);
-              reject(err);
-          })
-          .outputOptions([`-vf fps=1/${options.interval / 1000}`, `-q:v 2`])
-          .saveToFile(path.join(frameDir, outputFileTemplate)); 
-
-      ffmpeg.ffprobe(videoPath, (err: any, metadata: any) => {
-          if (err) {
-              return reject(err);
-          }
-          const duration = metadata?.format?.duration;
-          if (typeof duration !== "number") {
-              return reject(new Error("Video duration not found in metadata."));
-          }
-          const totalFrames = Math.floor(duration * 1000 / options.interval);
-          for (let i = 0; i < totalFrames; i++) {
-              if (options.frameSelection && (i < (options.frameSelection.start || 0) || i > (options.frameSelection.end || totalFrames - 1))) {
-                  continue;
-              }
-              frames.push({
-                  source: path.join(frameDir, `frame-${String(i).padStart(3, '0')}.${outputFormat}`),
-                  isRemote: false
-              });
-          }
-      });
-  }
-
-  return new Promise((resolve, reject) => {
-      processVideoExtraction(videoPath, frames, options, resolve, reject);
-  });
-}
-
-
-
-/**
- * Sets a pattern on a specific area of a buffered image.
- * @param {Buffer} buffer - The source image buffer.
- * @param {Object} options - Options to customize the pattern.
- * @returns {Promise<Buffer>} - The adjusted image buffer.
- */
-async patterns(buffer:Buffer, options: PatternOptions) {
-
-    const img = await loadImage(buffer);
-    const canvas = createCanvas(img.width, img.height);
-    const ctx: SKRSContext2D = canvas.getContext('2d');
-    ctx.drawImage(img, 0, 0);
-
-    const x = options.x || 0;
-    const y = options.y || 0;
-    const width = options.width || img.width;
-    const height = options.height || img.height;
-
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(x, y, width, height);
-    ctx.clip();
-
-    if (options.gradient) {
-        await this.fillWithGradient(ctx, width, height, options.gradient, x, y);
-    } else if (options.backgroundColor) {
-        ctx.fillStyle = options.backgroundColor;
-        ctx.fillRect(x, y, width, height);
-    }
-
-    switch (options.type) {
-        case 'dots':
-            await this.drawDotsPattern(ctx, width, height, options, x, y);
-            break;
-        case 'stripes':
-            await this.drawStripesPattern(ctx, width, height, options, x, y);
-            break;
-        case 'grid':
-            await this.drawGridPattern(ctx, width, height, options, x, y);
-            break;
-        case 'checkerboard':
-            await this.drawCheckerboardPattern(ctx, width, height, options, x, y);
-            break;
-        case 'custom':
-            await this.drawCustomPattern(ctx, width, height, options, x, y);
-            break;
-        case 'noise':
-            await this.drawNoisePattern(ctx, width, height, x, y);
-            break;
-        case 'waves':
-            await this.drawWavePattern(ctx, width, height, options, x, y);
-            break;
-        case 'diagonal-checkerboard':
-            await this.drawDiagonalCheckerboardPattern(ctx, width, height, options, x, y);
-            break;
-        default:
-            throw new Error('Invalid pattern type specified.');
-    }
-
-    ctx.restore();
-
-    return canvas.toBuffer('image/png');
-}
-
-  
-  /**
-   * Fills the specified area with a gradient.
-   * @param ctx The rendering context of the canvas.
-   * @param width The width of the area to fill.
-   * @param height The height of the area to fill.
-   * @param gradient The gradient options.
-   * @param x The x offset of the area.
-   * @param y The y offset of the area.
-   */
-  private async fillWithGradient(
-    ctx: SKRSContext2D,
-    width: number,
-    height: number,
-    gradient: GradientConfig,
-    x: number = 0,
-    y: number = 0
-  ): Promise<void> {
-    let grad: CanvasGradient;
-  
-    if (gradient.type === 'linear') {
-      grad = ctx.createLinearGradient(
-        (gradient.startX || 0) + x, 
-        (gradient.startY || 0) + y, 
-        (gradient.endX || width) + x, 
-        (gradient.endY || height) + y
-      );
-    } else {
-      grad = ctx.createRadialGradient(
-        (gradient.startX || width / 2) + x, 
-        (gradient.startY || height / 2) + y, 
-        gradient.startRadius || 0,
-        (gradient.endX || width / 2) + x, 
-        (gradient.endY || height / 2) + y, 
-        gradient.endRadius || Math.max(width, height)
-      );
-    }
-  
-    gradient.colors.forEach((stop: any) => {
-      grad.addColorStop(stop.stop, stop.color);
-    });
-  
-    ctx.fillStyle = grad;
-    ctx.fillRect(x, y, width, height);
-  }
-  
-  /**
-   * Draws a dots pattern in the specified area.
-   * @param ctx The rendering context of the canvas.
-   * @param width The width of the area.
-   * @param height The height of the area.
-   * @param options Options to customize the dot pattern.
-   * @param x The x offset of the area.
-   * @param y The y offset of the area.
-   */
-  private async drawDotsPattern(
-    ctx: SKRSContext2D,
-    width: number,
-    height: number,
-    options: PatternOptions,
-    x: number = 0,
-    y: number = 0
-  ): Promise<void> {
-    const color = options.color || 'black';
-    const radius = options.size || 5;
-    const spacing = options.spacing || 10;
-  
-    ctx.fillStyle = color;
-  
-    for (let posY = y; posY < y + height; posY += spacing) {
-      for (let posX = x; posX < x + width; posX += spacing) {
-        ctx.beginPath();
-        ctx.arc(posX, posY, radius, 0, Math.PI * 2);
-        ctx.fill();
-      }
-    }
-  }
-  
-  /**
-   * Draws a stripes pattern in the specified area.
-   * @param ctx The rendering context of the canvas.
-   * @param width The width of the area.
-   * @param height The height of the area.
-   * @param options Options to customize the stripes pattern.
-   * @param x The x offset of the area.
-   * @param y The y offset of the area.
-   */
-  private async drawStripesPattern(
-    ctx: SKRSContext2D,
-    width: number,
-    height: number,
-    options: PatternOptions,
-    x: number = 0,
-    y: number = 0
-  ): Promise<void> {
-    const color = options.color || 'black';
-    const stripeWidth = options.size || 10;
-    const spacing = options.spacing || 20;
-    const angle = options.angle || 0;
-  
-    ctx.fillStyle = color;
-    
-    ctx.save();
-  
-    ctx.translate(x + width / 2, y + height / 2);
-    ctx.rotate((angle * Math.PI) / 180);
-    ctx.translate(-width / 2, -height / 2);
-  
-    for (let posX = 0; posX < width; posX += stripeWidth + spacing) {
-      ctx.fillRect(posX, 0, stripeWidth, height);
-    }
-  
-    ctx.restore();
-  }
-    /**
-   * Draws a grid pattern in the specified area.
-   * @param ctx The rendering context of the canvas.
-   * @param width The width of the area.
-   * @param height The height of the area.
-   * @param options Options to customize the grid pattern.
-   * @param x The x offset of the area.
-   * @param y The y offset of the area.
-   */
-    private async drawGridPattern(
-    ctx: SKRSContext2D,
-    width: number,
-    height: number,
-    options: PatternOptions,
-    x: number = 0,
-    y: number = 0
-  ): Promise<void> {
-    const color = options.color || 'black';
-    const size = options.size || 20;
-  
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 1;
-  
-    for (let posX = x; posX <= x + width; posX += size) {
-      ctx.beginPath();
-      ctx.moveTo(posX, y);
-      ctx.lineTo(posX, y + height);
-      ctx.stroke();
-    }
-  
-    for (let posY = y; posY <= y + height; posY += size) {
-      ctx.beginPath();
-      ctx.moveTo(x, posY);
-      ctx.lineTo(x + width, posY);
-      ctx.stroke();
-    }
-  }
-  
-  /**
-   * Draws a checkerboard pattern in the specified area.
-   * @param ctx The rendering context of the canvas.
-   * @param width The width of the area.
-   * @param height The height of the area.
-   * @param options Options to customize the checkerboard pattern.
-   * @param x The x offset of the area.
-   * @param y The y offset of the area.
-   */
-  private async drawCheckerboardPattern(
-    ctx: SKRSContext2D,
-    width: number,
-    height: number,
-    options: PatternOptions,
-    x: number = 0,
-    y: number = 0
-  ): Promise<void> {
-    const color1 = options.color || 'black';
-    const color2 = options.secondaryColor || 'white';
-    const size = options.size || 20;
-
-    for (let posY = y; posY < y + height; posY += size) {
-      for (let posX = x; posX < x + width; posX += size) {
-        ctx.fillStyle = (Math.floor(posX / size) + Math.floor(posY / size)) % 2 === 0 ? color1 : color2;
-        ctx.fillRect(posX, posY, size, size);
-      }
-    }
-  }
-  
-  /**
-   * Draws a custom image pattern in the specified area.
-   * @param ctx The rendering context of the canvas.
-   * @param width The width of the area.
-   * @param height The height of the area.
-   * @param options Options to customize the custom pattern.
-   * @param x The x offset of the area.
-   * @param y The y offset of the area.
-   */
-  private async drawCustomPattern(
-    ctx: SKRSContext2D,
-    width: number,
-    height: number,
-    options: PatternOptions,
-    x: number = 0,
-    y: number = 0
-  ): Promise<void> {
-    if (!options.customPatternImage) {
-      throw new Error('Custom pattern image path is required for custom patterns.');
-    }
-  
-    const patternImage = await loadImage(options.customPatternImage);
-    const pattern = ctx.createPattern(patternImage, 'repeat');
-    ctx.fillStyle = pattern;
-    ctx.translate(x, y);
-    ctx.fillRect(0, 0, width, height);
-    ctx.resetTransform();
-  }
-
-  private async drawWavePattern(ctx: SKRSContext2D, width: number, height: number, options: PatternOptions, x = 0, y = 0) {
-    const color = options.color || 'black';
-    const waveHeight = options.size || 10;
-    const frequency = options.spacing || 20;
-
-    ctx.strokeStyle = color;
-    ctx.lineWidth = 2;
-
-    for (let posY = y; posY < y + height; posY += frequency) {
-        ctx.beginPath();
-        for (let posX = x; posX < x + width; posX += 5) {
-            const waveY = posY + Math.sin(posX / frequency) * waveHeight;
-            ctx.lineTo(posX, waveY);
-        }
-        ctx.stroke();
-    }
-  }
-
-
-  private async drawNoisePattern(ctx: SKRSContext2D, width: number, height: number, x = 0, y = 0) {
-    const imageData = ctx.createImageData(width, height);
-    const data = imageData.data;
-  
-    for (let i = 0; i < data.length; i += 4) {
-        const gray = Math.random() * 255;
-        data[i] = gray;
-        data[i + 1] = gray;
-        data[i + 2] = gray;
-        data[i + 3] = Math.random() * 255;
-    }
-  
-    ctx.putImageData(imageData, x, y);
-  }
-
-
-  private async drawDiagonalCheckerboardPattern(ctx: SKRSContext2D, width: number, height: number, options: PatternOptions, x = 0, y = 0) {
-    const color1 = options.color || 'black';
-    const color2 = options.secondaryColor || 'white';
-    const size = options.size || 20;
-
-    ctx.save();
-    ctx.translate(x + width / 2, y + height / 2);
-    ctx.rotate(Math.PI / 4);
-    ctx.translate(-width / 2, -height / 2);
-
-    for (let posY = 0; posY < height; posY += size) {
-        for (let posX = 0; posX < width; posX += size) {
-            ctx.fillStyle = (Math.floor(posX / size) + Math.floor(posY / size)) % 2 === 0 ? color1 : color2;
-            ctx.fillRect(posX, posY, size, size);
-        }
-    }
-
-    ctx.restore();
-}
-
-
-async masking(
-  source: string | Buffer | PathLike | Uint8Array, 
-  maskSource: string | Buffer | PathLike | Uint8Array, 
-  options: MaskOptions = { type: "alpha" }
-): Promise<Buffer> {
-  const img = await loadImage(source);
-  const mask = await loadImage(maskSource);
-
-  const canvas = createCanvas(img.width, img.height);
-  const ctx = canvas.getContext("2d") as SKRSContext2D;
-
-  ctx.drawImage(img, 0, 0, img.width, img.height);
-
-  const maskCanvas = createCanvas(img.width, img.height);
-  const maskCtx = maskCanvas.getContext("2d") as SKRSContext2D;
-  maskCtx.drawImage(mask, 0, 0, img.width, img.height);
-
-  const maskData = maskCtx.getImageData(0, 0, img.width, img.height);
-  const imgData = ctx.getImageData(0, 0, img.width, img.height);
-
-  for (let i = 0; i < maskData.data.length; i += 4) {
-      let alphaValue = 255;
-
-      if (options.type === "grayscale") {
-          const grayscale = maskData.data[i] * 0.3 + maskData.data[i + 1] * 0.59 + maskData.data[i + 2] * 0.11;
-          alphaValue = grayscale >= (options.threshold ?? 128) ? 255 : 0;
-      } else if (options.type === "alpha") {
-          alphaValue = maskData.data[i + 3];
-      } else if (options.type === "color" && options.colorKey) {
-          const colorMatch =
-              maskData.data[i] === parseInt(options.colorKey.slice(1, 3), 16) &&
-              maskData.data[i + 1] === parseInt(options.colorKey.slice(3, 5), 16) &&
-              maskData.data[i + 2] === parseInt(options.colorKey.slice(5, 7), 16);
-          alphaValue = colorMatch ? 0 : 255;
-      }
-
-      if (options.invert) alphaValue = 255 - alphaValue;
-
-      imgData.data[i + 3] = alphaValue;
-  }
-
-  ctx.putImageData(imgData, 0, 0);
-
-  return canvas.toBuffer("image/png");
-}
-
-async gradientBlend(
-  source: string | Buffer | PathLike | Uint8Array, 
-  options: BlendOptions
-): Promise<Buffer> {
-  const img = await loadImage(source);
-  const canvas = createCanvas(img.width, img.height);
-  const ctx = canvas.getContext("2d") as SKRSContext2D;
-
-  ctx.drawImage(img, 0, 0, img.width, img.height);
-
-  let gradient: CanvasGradient;
-  if (options.type === "linear") {
-      const angle = options.angle ?? 0;
-      const radians = (angle * Math.PI) / 180;
-      const x1 = img.width / 2 - (Math.cos(radians) * img.width) / 2;
-      const y1 = img.height / 2 - (Math.sin(radians) * img.height) / 2;
-      const x2 = img.width / 2 + (Math.cos(radians) * img.width) / 2;
-      const y2 = img.height / 2 + (Math.sin(radians) * img.height) / 2;
-      gradient = ctx.createLinearGradient(x1, y1, x2, y2);
-  } else if (options.type === "radial") {
-      gradient = ctx.createRadialGradient(
-          img.width / 2, img.height / 2, 0, img.width / 2, img.height / 2, Math.max(img.width, img.height)
-      );
-  } else {
-      gradient = ctx.createConicGradient(Math.PI, img.width / 2, img.height / 2);
-  }
-
-  options.colors.forEach(({ stop, color }: any) => gradient.addColorStop(stop, color));
-  ctx.fillStyle = gradient;
-
-  ctx.globalCompositeOperation = options.blendMode ?? "multiply";
-  ctx.fillRect(0, 0, img.width, img.height);
-
-  if (options.maskSource) {
-      const mask = await loadImage(options.maskSource);
-      ctx.globalCompositeOperation = "destination-in";
-      ctx.drawImage(mask, 0, 0, img.width, img.height);
-  }
-
-  ctx.globalCompositeOperation = "source-over";
-
-  return canvas.toBuffer("image/png");
-}
-
-async animate(
-  frames: Frame[],
-  defaultDuration: number, 
-  defaultWidth: number = 800,
-  defaultHeight: number = 600, 
-  options?: {
-      gif?: boolean;  
-      gifPath?: string;  
-      onStart?: () => void;
-      onFrame?: (index: number) => void;
-      onEnd?: () => void;
-  }
-): Promise<Buffer[] | undefined> {
-  const buffers: Buffer[] = [];
-  const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
-
-  if (options?.onStart) options.onStart();
-
-  let encoder: GIFEncoder | null = null;
-  let gifStream: fs.WriteStream | null = null;
-
-  if (options?.gif) {
-      if (!options.gifPath) {
-          throw new Error("GIF generation enabled but no gifPath provided.");
-      }
-      encoder = new GIFEncoder(defaultWidth, defaultHeight);
-      gifStream = fs.createWriteStream(options.gifPath);
-      encoder.createReadStream().pipe(gifStream);
-      encoder.start();
-      encoder.setRepeat(0); 
-      encoder.setQuality(10); 
-  }
-
-  for (let i = 0; i < frames.length; i++) {
-      const frame = frames[i];
-
-      const width = frame.width || defaultWidth;
-      const height = frame.height || defaultHeight;
-      const canvas = createCanvas(width, height);
-      const ctx: SKRSContext2D = canvas.getContext('2d');
-
-      if (!isNode) {
-          canvas.width = width;
-          canvas.height = height;
-          document.body.appendChild(canvas as unknown as Node);
-      }
-
-      ctx.clearRect(0, 0, width, height);
-
-      if (frame.transformations) {
-          const { scaleX = 1, scaleY = 1, rotate = 0, translateX = 0, translateY = 0 } = frame.transformations;
-          ctx.save(); 
-          ctx.translate(translateX, translateY);
-          ctx.rotate((rotate * Math.PI) / 180);
-          ctx.scale(scaleX, scaleY);
-      }
-
-      let fillStyle: string | CanvasGradient | CanvasPattern | null = null;
-
-      if (frame.gradient) {
-          const { type, startX, startY, endX, endY, startRadius, endRadius, colors } = frame.gradient;
-          let gradient: CanvasGradient | null = null;
-
-          if (type === 'linear') {
-              gradient = ctx.createLinearGradient(startX || 0, startY || 0, endX || width, endY || height);
-          } else if (type === 'radial') {
-              gradient = ctx.createRadialGradient(
-                  startX || width / 2,
-                  startY || height / 2,
-                  startRadius || 0,
-                  endX || width / 2,
-                  endY || height / 2,
-                  endRadius || Math.max(width, height)
-              );
-          }
-
-          colors.forEach((colorStop: any) => {
-              if (gradient) gradient.addColorStop(colorStop.stop, colorStop.color);
-          });
-
-          fillStyle = gradient;
-      }
-
-      if (frame.pattern) {
-          const patternImage = await loadImage(frame.pattern.source);
-          const pattern = ctx.createPattern(patternImage, frame.pattern.repeat || 'repeat');
-          fillStyle = pattern;
-      }
-
-      if (!fillStyle && frame.backgroundColor) {
-          fillStyle = frame.backgroundColor;
-      }
-
-      if (fillStyle) {
-          ctx.fillStyle = fillStyle;
-          ctx.fillRect(0, 0, width, height);
-      }
-
-      if (frame.source) {
-          const image = await loadImage(frame.source);
-          ctx.globalCompositeOperation = frame.blendMode || 'source-over';
-          ctx.drawImage(image, 0, 0, width, height);
-      }
-
-      if (frame.onDrawCustom) {
-          frame.onDrawCustom(ctx as unknown as SKRSContext2D, canvas);
-      }
-
-      if (frame.transformations) {
-          ctx.restore();
-      }
-
-      const buffer = canvas.toBuffer('image/png');
-      buffers.push(buffer);
-
-      if (encoder) {
-         
-          const frameDuration = frame.duration || defaultDuration;
-          encoder.setDelay(frameDuration); 
-          encoder.addFrame(ctx as unknown as CanvasRenderingContext2D); 
-      }
-
-      if (options?.onFrame) options.onFrame(i);
-      
-      await new Promise(resolve => setTimeout(resolve, frame.duration || defaultDuration));
-  }
-
-  if (encoder) {
-      encoder.finish();
-  }
-
-  if (options?.onEnd) options.onEnd();
-
-  return options?.gif ? undefined : buffers;
-}
-
-
-
-public validHex(hexColor: string): any {
-    const hexPattern = /^#[0-9a-fA-F]{6}$/;
-    if (!hexPattern.test(hexColor)) {
-        throw new Error("Invalid hexadecimal color format. It should be in the format '#RRGGBB'.");
-    }
-    return true
-  }
-
-  public async outPut(results: any): Promise< void | Buffer | string | Blob | Object | HTMLCanvasElement> {
-
-    const formatType: string = this.format?.type || 'buffer';
-    switch (formatType) {
-      case 'buffer':
-        return results;
-      case 'url':
-        return await url(results);
-      case 'dataURL':
-        return dataURL(results);
-      case 'blob':
-        return blob(results);
-      case 'base64':
-        return base64(results);
-      case 'arraybuffer':
-        return arrayBuffer(results);
-      default:
-        throw new Error('Unsupported format');
-    }
-  }
+import { createCanvas, loadImage, GlobalFonts, Image, SKRSContext2D  } from "@napi-rs/canvas";
+import GIFEncoder from "gifencoder";
+import ffmpeg from 'fluent-ffmpeg';
+import { PassThrough} from "stream";
+import axios from 'axios';
+import fs, { PathLike } from "fs";
+import path from "path";
+import { OutputFormat, CanvasConfig, TextObject, TextProperties, ImageProperties, GIFOptions, GIFResults, CustomOptions, cropOptions,
+     drawBackgroundGradient, drawBackgroundColor, customBackground, customLines,
+      drawText, converter, resizingImg, applyColorFilters, imgEffects,verticalBarChart, pieChart,
+     lineChart, cropInner, cropOuter, bgRemoval, detectColors, removeColor, dataURL, base64, arrayBuffer, blob, url, GradientConfig, Frame,
+     PatternOptions, ExtractFramesOptions, buildPath, ResizeOptions, MaskOptions, BlendOptions,
+    applyCanvasZoom, applyNoise,
+    applyStroke, applyRotation, applyShadow, drawBoxBackground, fitInto, loadImageCached,
+    drawShape, isShapeSource, ShapeType, createShapePath, createGradientFill, applyImageFilters, applySimpleProfessionalFilters
+    } from "./utils/utils";
+import { } from "./utils/Image/imageProperties";
+import { EnhancedTextRenderer } from "./utils/Texts/enhancedTextRenderer";
+import { EnhancedPatternRenderer } from "./utils/Patterns/enhancedPatternRenderer";
+
+  interface CanvasResults {
+    buffer: Buffer;
+    canvas: CanvasConfig;
+  }
+
+
+export class ApexPainter {
+  private format?: OutputFormat;
+
+  constructor({ type }: OutputFormat = { type: 'buffer' }) {
+    this.format = { type: type || 'buffer' };
+  }
+
+  /**
+   * Validates image properties for required fields.
+   * @private
+   * @param ip - Image properties to validate
+   */
+  #validateImageProperties(ip: ImageProperties): void {
+    if (!ip.source || ip.x == null || ip.y == null) {
+      throw new Error("createImage: source, x, and y are required.");
+    }
+  }
+
+  /**
+   * Validates text properties for required fields.
+   * @private
+   * @param textProps - Text properties to validate
+   */
+  #validateTextProperties(textProps: TextProperties): void {
+    if (!textProps.text || textProps.x == null || textProps.y == null) {
+      throw new Error("createText: text, x, and y are required.");
+    }
+  }
+
+  /**
+   * Renders enhanced text using the new text renderer.
+   * @private
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties
+   */
+  async #renderEnhancedText(ctx: SKRSContext2D, textProps: TextProperties): Promise<void> {
+    await EnhancedTextRenderer.renderText(ctx, textProps);
+  }
+
+  /**
+   * Creates a canvas with the given configuration.
+   * Applies rotation, shadow, border effects, background, and stroke.
+   * 
+   * @param canvas - Canvas configuration object containing:
+   *   - width: Canvas width in pixels
+   *   - height: Canvas height in pixels
+   *   - x: X position offset (default: 0)
+   *   - y: Y position offset (default: 0)
+   *   - colorBg: Solid color background (hex, rgb, rgba, hsl, etc.)
+   *   - gradientBg: Gradient background configuration
+   *   - customBg: Custom background image buffer
+   *   - zoom: Canvas zoom level (default: 1)
+   *   - pattern: Pattern background configuration
+   *   - noise: Noise effect configuration
+   * 
+   * @returns Promise<CanvasResults> - Object containing canvas buffer and configuration
+   * 
+   * @throws Error if canvas configuration is invalid or conflicting
+   * 
+   * @example
+   * ```typescript
+   * const result = await painter.createCanvas({
+   *   width: 800,
+   *   height: 600,
+   *   colorBg: '#ffffff',
+   *   zoom: 1.5
+   * });
+   * const buffer = result.buffer;
+   * ```
+   */
+async createCanvas(canvas: CanvasConfig): Promise<CanvasResults> {
+  // Handle inherit sizing
+  if (canvas.customBg?.inherit) {
+    let p = canvas.customBg.source;
+    if (!/^https?:\/\//i.test(p)) p = path.join(process.cwd(), p);
+    try {
+      const img = await loadImage(p);
+      canvas.width = img.width;
+      canvas.height = img.height;
+    } catch (e:any) {
+      console.error('inherit load failed:', e?.message ?? e);
+    }
+  }
+
+  // 2) Use final width/height after inherit
+  const width  = canvas.width  ?? 500;
+  const height = canvas.height ?? 500;
+
+  const {
+    x = 0, y = 0,
+    rotation = 0,
+    borderRadius = 0,
+    borderPosition = 'all',
+    opacity = 1,
+    colorBg, customBg, gradientBg,
+    patternBg, noiseBg, blendMode,
+    zoom, stroke, shadow,
+    blur
+  } = canvas;
+
+  // Validate background configuration
+  const bgSources = [
+    canvas.colorBg ? 'colorBg' : null,
+    canvas.gradientBg ? 'gradientBg' : null,
+    canvas.customBg ? 'customBg' : null
+  ].filter(Boolean);
+
+  if (bgSources.length > 1) {
+    throw new Error(`createCanvas: only one of colorBg, gradientBg, or customBg can be used. You provided: ${bgSources.join(', ')}`);
+  }
+
+  const cv = createCanvas(width, height);
+  const ctx = cv.getContext('2d') as SKRSContext2D;
+  if (!ctx) throw new Error('Unable to get 2D context');
+
+
+  ctx.globalAlpha = opacity;
+
+  // ---- BACKGROUND (clipped) ----
+  ctx.save();
+  applyRotation(ctx, rotation, x, y, width, height);
+
+  buildPath(ctx, x, y, width, height, borderRadius, borderPosition);
+  ctx.clip();
+
+  applyCanvasZoom(ctx, width, height, zoom);
+
+  ctx.translate(x, y);
+  if (typeof blendMode === 'string') {
+    ctx.globalCompositeOperation = blendMode as any;
+  }
+
+  if (customBg)      await customBackground(ctx, { ...canvas, blur });
+  else if (gradientBg) await drawBackgroundGradient(ctx, { ...canvas, blur });
+  else               await drawBackgroundColor(ctx, { ...canvas, blur, colorBg: colorBg ?? '#000' });
+
+  if (patternBg) await EnhancedPatternRenderer.renderPattern(ctx, cv, patternBg);
+  if (noiseBg)   applyNoise(ctx, width, height, noiseBg.intensity ?? 0.05);
+
+  ctx.restore();
+
+  // Apply shadow effect
+  if (shadow) {
+    ctx.save();
+    buildPath(ctx, x, y, width, height, borderRadius, borderPosition);
+    applyShadow(ctx, shadow, x, y, width, height);
+    ctx.restore();
+  }
+
+  // Apply stroke effect
+  if (stroke) {
+    ctx.save();
+    buildPath(ctx, x, y, width, height, borderRadius, borderPosition);
+    applyStroke(ctx, stroke, x, y, width, height);
+    ctx.restore();
+  }
+
+  return { buffer: cv.toBuffer('image/png'), canvas };
+}
+
+
+
+  /**
+   * Draws one or more images (or shapes) on an existing canvas buffer.
+   * 
+   * @param images - Single ImageProperties object or array of ImageProperties containing:
+   *   - source: Image path/URL/Buffer or ShapeType ('rectangle', 'circle', etc.)
+   *   - x: X position on canvas
+   *   - y: Y position on canvas
+   *   - width: Image/shape width (optional, defaults to original size)
+   *   - height: Image/shape height (optional, defaults to original size)
+   *   - inherit: Use original image dimensions (boolean)
+   *   - fit: Image fitting mode ('fill', 'contain', 'cover', 'scale-down', 'none')
+   *   - align: Image alignment ('center', 'start', 'end')
+   *   - rotation: Rotation angle in degrees (default: 0)
+   *   - opacity: Opacity level 0-1 (default: 1)
+   *   - blur: Blur radius in pixels (default: 0)
+   *   - borderRadius: Border radius or 'circular' (default: 0)
+   *   - borderPosition: Border position ('all', 'top', 'bottom', 'left', 'right')
+   *   - filters: Array of image filters to apply
+   *   - shape: Shape properties (when source is a shape)
+   *   - shadow: Shadow configuration
+   *   - stroke: Stroke configuration
+   *   - boxBackground: Background behind image/shape
+   * 
+   * @param canvasBuffer - Existing canvas buffer (Buffer) or CanvasResults object
+   * 
+   * @returns Promise<Buffer> - Updated canvas buffer in PNG format
+   * 
+   * @throws Error if source, x, or y are missing
+   * 
+   * @example
+   * ```typescript
+   * const result = await painter.createImage([
+   *   {
+   *     source: 'rectangle',
+   *     x: 100, y: 100,
+   *     width: 200, height: 150,
+   *     shape: { fill: true, color: '#ff6b6b' },
+   *     shadow: { color: 'rgba(0,0,0,0.3)', offsetX: 5, offsetY: 5, blur: 10 }
+   *   }
+   * ], canvasBuffer);
+   * ```
+   */
+  async createImage(
+    images: ImageProperties | ImageProperties[],
+    canvasBuffer: CanvasResults | Buffer
+  ): Promise<Buffer> {
+    const list = Array.isArray(images) ? images : [images];
+
+    // Load base canvas buffer
+    const base: Image = Buffer.isBuffer(canvasBuffer)
+      ? await loadImage(canvasBuffer)
+      : await loadImage((canvasBuffer as CanvasResults).buffer);
+
+    const cv = createCanvas(base.width, base.height);
+    const ctx = cv.getContext("2d") as SKRSContext2D;
+    if (!ctx) throw new Error("Unable to get 2D rendering context");
+
+    // Paint bg
+    ctx.drawImage(base, 0, 0);
+
+    // Draw each image/shape on canvas
+    for (const ip of list) {
+      await this.#drawImageBitmap(ctx, ip);
+    }
+
+    // Return updated buffer
+    return cv.toBuffer("image/png");
+  }
+
+  /**
+   * Draws a single bitmap or shape with independent shadow & stroke.
+   * @private
+   * @param ctx - Canvas 2D context
+   * @param ip - Image properties
+   */
+  async #drawImageBitmap(ctx: SKRSContext2D, ip: ImageProperties): Promise<void> {
+    const {
+      source, x, y,
+      width, height,
+      inherit,
+      fit = "fill",
+      align = "center",
+      rotation = 0,
+      opacity = 1,
+      blur = 0,
+      borderRadius = 0,
+      borderPosition = "all",
+      shadow,
+      stroke,
+      boxBackground,
+      shape,
+      filters
+    } = ip;
+
+    this.#validateImageProperties(ip);
+
+    // Check if source is a shape
+    if (isShapeSource(source)) {
+      await this.#drawShape(ctx, source, x, y, width ?? 100, height ?? 100, {
+        ...shape,
+        rotation,
+        opacity,
+        blur,
+        borderRadius,
+        borderPosition,
+        shadow,
+        stroke,
+        boxBackground,
+        filters
+      });
+      return;
+    }
+
+    // Handle image sources
+    const img = await loadImageCached(source);
+
+    // Resolve this image's destination box
+    const boxW = (inherit && !width)  ? img.width  : (width  ?? img.width);
+    const boxH = (inherit && !height) ? img.height : (height ?? img.height);
+    const box = { x, y, w: boxW, h: boxH };
+
+    ctx.save();
+
+    // Rotate around the box center; affects shadow, background, bitmap, stroke uniformly
+    applyRotation(ctx, rotation, box.x, box.y, box.w, box.h);
+
+    // 1) Shadow (independent) — supports gradient or color
+    applyShadow(ctx, box, shadow);
+
+    // 2) Optional box background (under bitmap, inside clip) — color or gradient
+    drawBoxBackground(ctx, box, boxBackground, borderRadius, borderPosition);
+
+    // 3) Clip to image border radius, then draw the bitmap with blur/opacity and fit/align
+    ctx.save();
+    buildPath(ctx, box.x, box.y, box.w, box.h, borderRadius, borderPosition);
+    ctx.clip();
+
+    const { dx, dy, dw, dh, sx, sy, sw, sh } =
+      fitInto(box.x, box.y, box.w, box.h, img.width, img.height, fit, align);
+
+    const prevAlpha = ctx.globalAlpha;
+    ctx.globalAlpha = opacity ?? 1;
+    if ((blur ?? 0) > 0) ctx.filter = `blur(${blur}px)`;
+
+    // Apply professional image filters BEFORE drawing
+    if (filters && filters.length > 0) {
+      await applySimpleProfessionalFilters(ctx, filters, dw, dh);
+    }
+
+    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
+
+    ctx.filter = "none";
+    ctx.globalAlpha = prevAlpha;
+    ctx.restore();
+
+
+    // 4) Stroke (independent) — supports gradient or color
+    applyStroke(ctx, box, stroke);
+
+    ctx.restore();
+  }
+
+  /**
+   * Draws a shape with all effects (shadow, stroke, filters, etc.).
+   * @private
+   * @param ctx - Canvas 2D context
+   * @param shapeType - Type of shape to draw
+   * @param x - X position
+   * @param y - Y position
+   * @param width - Shape width
+   * @param height - Shape height
+   * @param options - Shape drawing options
+   */
+  async #drawShape(
+    ctx: SKRSContext2D, 
+    shapeType: ShapeType, 
+    x: number, 
+    y: number, 
+    width: number, 
+    height: number,
+    options: {
+      rotation?: number;
+      opacity?: number;
+      blur?: number;
+      borderRadius?: number | 'circular';
+      borderPosition?: string;
+      shadow?: any;
+      stroke?: any;
+      boxBackground?: any;
+      fill?: boolean;
+      color?: string;
+      gradient?: any;
+      radius?: number;
+      sides?: number;
+      innerRadius?: number;
+      outerRadius?: number;
+      filters?: any[];
+    }
+  ): Promise<void> {
+    const box = { x, y, w: width, h: height };
+
+    ctx.save();
+
+    // Apply rotation
+    if (options.rotation) {
+      applyRotation(ctx, options.rotation, box.x, box.y, box.w, box.h);
+    }
+
+    // Apply opacity
+    if (options.opacity !== undefined) {
+      ctx.globalAlpha = options.opacity;
+    }
+
+    // Apply blur
+    if (options.blur && options.blur > 0) {
+      ctx.filter = `blur(${options.blur}px)`;
+    }
+
+    // 1) Custom Shadow for complex shapes (heart, star)
+    if (options.shadow && this.#isComplexShape(shapeType)) {
+      this.#applyShapeShadow(ctx, shapeType, x, y, width, height, options.shadow, {
+        radius: options.radius,
+        sides: options.sides,
+        innerRadius: options.innerRadius,
+        outerRadius: options.outerRadius
+      });
+    } else if (options.shadow) {
+      // Use standard shadow for simple shapes
+      applyShadow(ctx, box, options.shadow);
+    }
+
+    // 2) Optional box background
+    if (options.boxBackground) {
+      drawBoxBackground(ctx, box, options.boxBackground, options.borderRadius, options.borderPosition);
+    }
+
+    // 3) Draw the shape
+    ctx.save();
+    if (options.borderRadius) {
+      buildPath(ctx, box.x, box.y, box.w, box.h, options.borderRadius, options.borderPosition);
+      ctx.clip();
+    }
+
+    // Apply professional filters BEFORE drawing the shape
+    if (options.filters && options.filters.length > 0) {
+      await applySimpleProfessionalFilters(ctx, options.filters, width, height);
+    }
+
+    drawShape(ctx, shapeType, x, y, width, height, {
+      fill: options.fill,
+      color: options.color,
+      gradient: options.gradient,
+      radius: options.radius,
+      sides: options.sides,
+      innerRadius: options.innerRadius,
+      outerRadius: options.outerRadius
+    });
+
+    ctx.restore();
+
+
+    // 4) Custom Stroke for complex shapes (heart, star)
+    if (options.stroke && this.#isComplexShape(shapeType)) {
+      this.#applyShapeStroke(ctx, shapeType, x, y, width, height, options.stroke, {
+        radius: options.radius,
+        sides: options.sides,
+        innerRadius: options.innerRadius,
+        outerRadius: options.outerRadius
+      });
+    } else if (options.stroke) {
+      // Use standard stroke for simple shapes
+      applyStroke(ctx, box, options.stroke);
+    }
+
+    // Reset filters and alpha
+    ctx.filter = "none";
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  /**
+   * Checks if shape needs custom shadow/stroke (heart, star).
+   * @private
+   * @param shapeType - Type of shape
+   * @returns True if shape is complex and needs custom effects
+   */
+  #isComplexShape(shapeType: ShapeType): boolean {
+    return shapeType === 'heart' || shapeType === 'star';
+  }
+
+  /**
+   * Applies custom shadow for complex shapes (heart, star).
+   * @private
+   * @param ctx - Canvas 2D context
+   * @param shapeType - Type of shape
+   * @param x - X position
+   * @param y - Y position
+   * @param width - Shape width
+   * @param height - Shape height
+   * @param shadow - Shadow options
+   * @param shapeOptions - Shape-specific options
+   */
+  #applyShapeShadow(
+    ctx: SKRSContext2D,
+    shapeType: ShapeType,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    shadow: any,
+    shapeProps: any
+  ): void {
+    const {
+      color = "rgba(0,0,0,1)",
+      gradient,
+      opacity = 0.4,
+      offsetX = 0,
+      offsetY = 0,
+      blur = 20
+    } = shadow;
+
+    ctx.save();
+    ctx.globalAlpha = opacity;
+    if (blur > 0) ctx.filter = `blur(${blur}px)`;
+
+    // Set shadow color or gradient
+    if (gradient) {
+      const gfill = createGradientFill(ctx, gradient, { x: x + offsetX, y: y + offsetY, w: width, h: height });
+      ctx.fillStyle = gfill as any;
+    } else {
+      ctx.fillStyle = color;
+    }
+
+    // Create shadow path
+    createShapePath(ctx, shapeType, x + offsetX, y + offsetY, width, height, shapeProps);
+    ctx.fill();
+
+    ctx.filter = "none";
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+  /**
+   * Applies custom stroke for complex shapes (heart, star).
+   * @private
+   * @param ctx - Canvas 2D context
+   * @param shapeType - Type of shape
+   * @param x - X position
+   * @param y - Y position
+   * @param width - Shape width
+   * @param height - Shape height
+   * @param stroke - Stroke options
+   * @param shapeOptions - Shape-specific options
+   */
+  #applyShapeStroke(
+    ctx: SKRSContext2D,
+    shapeType: ShapeType,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    stroke: any,
+    shapeProps: any
+  ): void {
+    const {
+      color = "#000",
+      gradient,
+      width: strokeWidth = 2,
+      position = 0,
+      blur = 0,
+      opacity = 1
+    } = stroke;
+
+    ctx.save();
+    if (blur > 0) ctx.filter = `blur(${blur}px)`;
+    ctx.globalAlpha = opacity;
+
+    // Set stroke color or gradient
+    if (gradient) {
+      const gstroke = createGradientFill(ctx, gradient, { x, y, w: width, h: height });
+      ctx.strokeStyle = gstroke as any;
+    } else {
+      ctx.strokeStyle = color;
+    }
+
+    ctx.lineWidth = strokeWidth;
+
+    // Create stroke path
+    createShapePath(ctx, shapeType, x, y, width, height, shapeProps);
+    ctx.stroke();
+
+    ctx.filter = "none";
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+
+
+  /**
+   * Creates text on an existing canvas buffer with enhanced styling options.
+   * 
+   * @param textArray - Single TextProperties object or array of TextProperties containing:
+   *   - text: Text content to render (required)
+   *   - x: X position on canvas (required)
+   *   - y: Y position on canvas (required)
+   *   - fontPath: Path to custom font file (.ttf, .otf, .woff, etc.)
+   *   - fontName: Custom font name (used with fontPath)
+   *   - fontSize: Font size in pixels (default: 16)
+   *   - fontFamily: Font family name (e.g., 'Arial', 'Helvetica')
+   *   - bold: Make text bold (boolean)
+   *   - italic: Make text italic (boolean)
+   *   - underline: Add underline decoration (boolean)
+   *   - overline: Add overline decoration (boolean)
+   *   - strikethrough: Add strikethrough decoration (boolean)
+   *   - highlight: Highlight text with background color and opacity
+   *   - lineHeight: Line height multiplier (default: 1.4)
+   *   - letterSpacing: Space between letters in pixels
+   *   - wordSpacing: Space between words in pixels
+   *   - maxWidth: Maximum width for text wrapping
+   *   - maxHeight: Maximum height for text (truncates with ellipsis)
+   *   - textAlign: Horizontal text alignment ('left', 'center', 'right', 'start', 'end')
+   *   - textBaseline: Vertical text baseline ('alphabetic', 'bottom', 'hanging', 'ideographic', 'middle', 'top')
+   *   - color: Text color (hex, rgb, rgba, hsl, etc.)
+   *   - gradient: Gradient fill for text
+   *   - opacity: Text opacity (0-1, default: 1)
+   *   - glow: Text glow effect with color, intensity, and opacity
+   *   - shadow: Text shadow effect with color, offset, blur, and opacity
+   *   - stroke: Text stroke/outline with color, width, gradient, and opacity
+   *   - rotation: Text rotation in degrees
+   * 
+   * @param canvasBuffer - Existing canvas buffer (Buffer) or CanvasResults object
+   * 
+   * @returns Promise<Buffer> - Updated canvas buffer in PNG format
+   * 
+   * @throws Error if text, x, or y are missing, or if canvas buffer is invalid
+   * 
+   * @example
+   * ```typescript
+   * const result = await painter.createText([
+   *   {
+   *     text: "Hello World!",
+   *     x: 100, y: 100,
+   *     fontSize: 24,
+   *     bold: true,
+   *     color: '#ff6b6b',
+   *     shadow: { color: 'rgba(0,0,0,0.3)', offsetX: 2, offsetY: 2, blur: 4 },
+   *     underline: true,
+   *     highlight: { color: '#ffff00', opacity: 0.3 }
+   *   }
+   * ], canvasBuffer);
+   * ```
+   */
+  async createText(textArray: TextProperties | TextProperties[], canvasBuffer: CanvasResults | Buffer): Promise<Buffer> {
+    try {
+      // Ensure textArray is an array
+      const textList = Array.isArray(textArray) ? textArray : [textArray];
+
+      // Validate each text object
+      for (const textProps of textList) {
+        this.#validateTextProperties(textProps);
+      }
+
+      // Load existing canvas buffer
+      let existingImage: any;
+      
+      if (Buffer.isBuffer(canvasBuffer)) {
+        existingImage = await loadImage(canvasBuffer);
+      } else if (canvasBuffer && canvasBuffer.buffer) {
+        existingImage = await loadImage(canvasBuffer.buffer);
+      } else {
+        throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
+      }
+
+      if (!existingImage) {
+        throw new Error('Unable to load image from buffer');
+      }
+
+      // Create new canvas with same dimensions
+      const canvas = createCanvas(existingImage.width, existingImage.height);
+      const ctx = canvas.getContext("2d");
+
+      if (!ctx) {
+        throw new Error("Unable to get 2D rendering context");
+      }
+
+      // Draw existing image as background
+      ctx.drawImage(existingImage, 0, 0);
+
+      // Render each text object with enhanced features
+      for (const textProps of textList) {
+        await this.#renderEnhancedText(ctx, textProps);
+      }
+
+      return canvas.toBuffer("image/png");
+    } catch (error) {
+      console.error("Error creating text:", error);
+      throw new Error("Failed to create text on canvas");
+    }
+  }
+
+
+
+  async createCustom(options: CustomOptions[], buffer: CanvasResults | Buffer, ): Promise<Buffer> {
+    try {
+
+      if (!Array.isArray(options)) {
+        options = [options];
+      }
+
+      let existingImage: any;
+        
+      if (Buffer.isBuffer(buffer)) {
+        existingImage = await loadImage(buffer);
+      } else if (buffer && buffer.buffer) {
+        existingImage = await loadImage(buffer.buffer);
+      } else {
+        throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
+      }
+
+      if (!existingImage) {
+        throw new Error('Unable to load image from buffer');
+      }
+
+      const canvas = createCanvas(existingImage.width, existingImage.height);
+      const ctx = canvas.getContext("2d");
+
+      ctx.drawImage(existingImage, 0, 0);
+
+      customLines(ctx, options);
+
+      return canvas.toBuffer("image/png");
+    } catch (error) {
+        console.error("Error creating custom image:", error);
+        throw new Error("Failed to create custom image");
+    }
+}
+
+async createGIF(gifFrames: { background: string; duration: number }[], options: GIFOptions): Promise<GIFResults | any> {
+  async function resizeImage(image: any, targetWidth: number, targetHeight: number) {
+      const canvas = createCanvas(targetWidth, targetHeight);
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+      return canvas;
+  }
+
+  function createOutputStream(outputFile: string): fs.WriteStream {
+      return fs.createWriteStream(outputFile);
+  }
+
+  function createBufferStream() {
+      const bufferStream = new PassThrough();
+      const chunks: Buffer[] = [];
+  
+      bufferStream.on('data', (chunk: Buffer) => {
+          chunks.push(chunk);
+      });
+  
+      return {
+          ...bufferStream,
+          getBuffer: function (): Buffer {
+              return Buffer.concat(chunks);
+          }
+      } as any;
+  }
+
+  function validateOptions(options: GIFOptions) {
+      if (options.outputFormat === "file" && !options.outputFile) {
+          throw new Error("Output file path is required when using file output format.");
+      }
+      if (options.repeat !== undefined && (typeof options.repeat !== "number" || options.repeat < 0)) {
+          throw new Error("Repeat must be a non-negative number or undefined.");
+      }
+      if (options.quality !== undefined && (typeof options.quality !== "number" || options.quality < 1 || options.quality > 20)) {
+          throw new Error("Quality must be a number between 1 and 20 or undefined.");
+      }
+      if (options.watermark && typeof options.watermark.enable !== "boolean") {
+          throw new Error("Watermark must be a boolean or undefined.");
+      }
+      if (options.textOverlay) {
+          const textOptions = options.textOverlay;
+          if (!textOptions.text || typeof textOptions.text !== "string") {
+              throw new Error("Text overlay text is required and must be a string.");
+          }
+          if (textOptions.fontSize !== undefined && (!Number.isInteger(textOptions.fontSize) || textOptions.fontSize <= 0)) {
+              throw new Error("Text overlay fontSize must be a positive integer or undefined.");
+          }
+          if (textOptions.fontColor !== undefined && typeof textOptions.fontColor !== "string") {
+              throw new Error("Text overlay fontColor must be a string or undefined.");
+          }
+      }
+  }
+
+  try {
+      validateOptions(options);
+  
+      const canvasWidth = options.width || 1200;
+      const canvasHeight = options.height || 1200;
+
+      const encoder = new GIFEncoder(canvasWidth, canvasHeight);
+      const outputStream = options.outputFile ? createOutputStream(options.outputFile) : createBufferStream();
+      
+      encoder.createReadStream().pipe(outputStream);
+      
+      encoder.start();
+      encoder.setRepeat(options.repeat || 0);
+      encoder.setQuality(options.quality || 10);
+
+      const canvas = createCanvas(canvasWidth, canvasHeight);
+      const ctx:any = canvas.getContext("2d");
+      
+      for (const frame of gifFrames) {
+          const image = await loadImage(frame.background);
+          const resizedImage = await resizeImage(image, canvasWidth, canvasHeight);
+          
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(resizedImage, 0, 0);
+          
+          if (options.watermark?.enable) {
+              const watermark = await loadImage(options.watermark.url);
+              ctx.drawImage(watermark, 10, canvasHeight - watermark.height - 10);
+          }
+          
+          if (options.textOverlay) {
+              ctx.font = `${options.textOverlay.fontSize || 20}px Arial`;
+              ctx.fillStyle = options.textOverlay.fontColor || "white";
+              ctx.fillText(options.textOverlay.text, options.textOverlay.x || 10, options.textOverlay.y || 30);
+          }
+
+          encoder.setDelay(frame.duration);
+          encoder.addFrame(ctx);
+      }
+      
+      encoder.finish();
+      outputStream.end();
+      
+      if (options.outputFormat === "file") {
+          await new Promise((resolve) => outputStream.on("finish", resolve));
+      } else if (options.outputFormat === "base64") {
+          if ('getBuffer' in outputStream) {
+              return outputStream.getBuffer().toString("base64");
+          }
+      } else if (options.outputFormat === "attachment") {
+          const gifStream = encoder.createReadStream();
+          return [{ attachment: gifStream, name: "gif.js" }];
+      } else if (options.outputFormat === "buffer") {
+          if ('getBuffer' in outputStream) {
+              return outputStream.getBuffer();
+          }
+      } else {
+          throw new Error("Invalid output format. Supported formats are 'file', 'base64', 'attachment', and 'buffer'.");
+      }
+  } catch (e: any) {
+      console.error(e.message);
+      throw e;
+  }
+}
+
+  async resize(resizeOptions: ResizeOptions) {
+    return resizingImg(resizeOptions)
+  }
+
+  async imgConverter(source: string, newExtension: string) {
+    return converter(source, newExtension)
+  }
+
+  async effects(source: string, filters: any[]) {
+    return imgEffects(source, filters)
+  }
+
+  async colorsFilter(source: string, filterColor: any, opacity?: number) {
+    return applyColorFilters(source, filterColor, opacity)
+  }
+
+  async colorAnalysis(source: string) {
+    return detectColors(source)
+  }
+
+  async colorsRemover(source: string, colorToRemove: { red: number, green: number, blue: number }) {
+    return removeColor(source, colorToRemove)
+  }
+
+  async removeBackground(imageURL: string, apiKey: string) {
+    return bgRemoval(imageURL, apiKey)
+  }
+
+  async blend(
+    layers: {
+      image: string | Buffer;
+      blendMode: 'source-over' | 'source-in' | 'source-out' | 'source-atop' |
+                 'destination-over' | 'destination-in' | 'destination-out' |
+                 'destination-atop' | 'lighter' | 'copy' | 'xor' |
+                 'multiply' | 'screen' | 'overlay' | 'darken' |
+                 'lighten' | 'color-dodge' | 'color-burn' |
+                 'hard-light' | 'soft-light' | 'difference' | 'exclusion' |
+                 'hue' | 'saturation' | 'color' | 'luminosity';
+      position?: { x: number; y: number };
+      opacity?: number;
+    }[],
+    baseImageBuffer: Buffer,
+    defaultBlendMode: 'source-over' | 'source-in' | 'source-out' | 'source-atop' |
+                      'destination-over' | 'destination-in' | 'destination-out' |
+                      'destination-atop' | 'lighter' | 'copy' | 'xor' |
+                      'multiply' | 'screen' | 'overlay' | 'darken' |
+                      'lighten' | 'color-dodge' | 'color-burn' |
+                      'hard-light' | 'soft-light' | 'difference' | 'exclusion' |
+                      'hue' | 'saturation' | 'color' | 'luminosity' = 'source-over'
+  ): Promise<Buffer> {
+    try {
+      const baseImage = await loadImage(baseImageBuffer);
+      const canvas = createCanvas(baseImage.width, baseImage.height);
+      const ctx = canvas.getContext('2d');
+  
+      ctx.globalCompositeOperation = defaultBlendMode;
+      ctx.drawImage(baseImage, 0, 0);
+  
+      for (const layer of layers) {
+        const layerImage = await loadImage(layer.image);
+        ctx.globalAlpha = layer.opacity !== undefined ? layer.opacity : 1.0;
+  
+        ctx.globalCompositeOperation = layer.blendMode;
+        ctx.drawImage(layerImage, layer.position?.x || 0, layer.position?.y || 0);
+      }
+  
+      ctx.globalAlpha = 1.0;
+      ctx.globalCompositeOperation = defaultBlendMode; // Reset to user-defined default
+  
+      return canvas.toBuffer('image/png');
+    } catch (error) {
+      console.error('Error creating layered composition:', error);
+      throw new Error('Failed to create layered composition');
+    }
+  }
+  
+
+  async createChart(data: any, type: { chartType: string, chartNumber: number}) {
+
+    if (!data || Object.keys(data).length === 0) {
+        throw new Error('You need to provide datasets to create charts.');
+    }
+
+    if (!type || !type.chartNumber || !type.chartType) {
+        throw new Error('Type arguments are missing.');
+    }
+
+    const { chartType, chartNumber } = type;
+
+    switch (chartType.toLowerCase()) {
+        case 'bar':
+            switch (chartNumber) {
+                case 1:
+                    return await verticalBarChart(data);
+                case 2:
+                    throw new Error('Type 2 is still under development.');
+                default:
+                    throw new Error('Invalid chart number for chart type "bar".');
+            }
+        case 'line':
+            switch (chartNumber) {
+                case 1:
+                    return await lineChart(data);
+                case 2:
+                    throw new Error('Type 2 is still under development.');
+                default:
+                    throw new Error('Invalid chart number for chart type "line".');
+            }
+        case 'pie':
+            switch (chartNumber) {
+                case 1:
+                    return await pieChart(data);
+                case 2:
+                    throw new Error('Type 2 is still under development.');
+                default:
+                    throw new Error('Invalid chart number for chart type "pie".');
+            }
+        default:
+            throw new Error(`Unsupported chart type "${chartType}".`);
+    }
+  }
+
+
+  async  cropImage(options: cropOptions): Promise<Buffer> {
+    try {
+      if (!options.imageSource) throw new Error('The "imageSource" option is needed. Please provide the path to the image to crop.');
+      if (!options.coordinates || options.coordinates.length < 3) throw new Error('The "coordinates" option is needed. Please provide coordinates to crop the image.');
+
+      if (options.crop === 'outer') {
+          return await cropOuter(options);
+      } else if (options.crop === 'inner') {
+          return await cropInner(options);
+      } else {
+          throw new Error('Invalid crop option. Please specify "inner" or "outer".');
+      }
+    } catch (error) {
+      console.error('An error occurred:', error);
+      throw error;
+    }
+  }
+
+  private async drawImage(ctx: SKRSContext2D, image: ImageProperties): Promise<void> {
+
+
+  }
+  
+
+async extractFrames(videoSource: string | Buffer, options: ExtractFramesOptions): Promise<any[]> {
+  const frames: any[]= [];
+  const frameDir = path.join(__dirname, 'frames');
+
+  if (!fs.existsSync(frameDir)) {
+      fs.mkdirSync(frameDir);
+  }
+
+  const videoPath = typeof videoSource === 'string' ? videoSource : path.join(frameDir, 'temp-video.mp4');
+
+  if (Buffer.isBuffer(videoSource)) {
+      fs.writeFileSync(videoPath, videoSource);
+  } else if (videoSource.startsWith('http')) {
+      await axios({
+          method: 'get',
+          url: videoSource,
+          responseType: 'arraybuffer'
+      })
+      .then((response) => {
+          fs.writeFileSync(videoPath, response.data);
+      })
+      .catch(err => {
+          throw new Error(`Error downloading video: ${err.message}`);
+      });
+  } else if (!fs.existsSync(videoPath)) {
+      throw new Error("Video file not found at specified path.");
+  }
+
+  function processVideoExtraction(videoPath: string, frames: any[], options: ExtractFramesOptions, resolve: any, reject: any) {
+      const outputFormat = options.outputFormat || 'jpg';
+      const outputFileTemplate = `frame-%03d.${outputFormat}`;
+
+      ffmpeg(videoPath)
+          .on('end', () => {
+              console.log('Frames extracted successfully.');
+              resolve(frames);
+          })
+          .on('error', (err: { message: any; }) => {
+              console.error('Error extracting frames:', err.message);
+              reject(err);
+          })
+          .outputOptions([`-vf fps=1/${options.interval / 1000}`, `-q:v 2`])
+          .saveToFile(path.join(frameDir, outputFileTemplate)); 
+
+      ffmpeg.ffprobe(videoPath, (err: any, metadata: any) => {
+          if (err) {
+              return reject(err);
+          }
+          const duration = metadata?.format?.duration;
+          if (typeof duration !== "number") {
+              return reject(new Error("Video duration not found in metadata."));
+          }
+          const totalFrames = Math.floor(duration * 1000 / options.interval);
+          for (let i = 0; i < totalFrames; i++) {
+              if (options.frameSelection && (i < (options.frameSelection.start || 0) || i > (options.frameSelection.end || totalFrames - 1))) {
+                  continue;
+              }
+              frames.push({
+                  source: path.join(frameDir, `frame-${String(i).padStart(3, '0')}.${outputFormat}`),
+                  isRemote: false
+              });
+          }
+      });
+  }
+
+  return new Promise((resolve, reject) => {
+      processVideoExtraction(videoPath, frames, options, resolve, reject);
+  });
+}
+
+
+
+
+  
+  
+  
+
+
+async masking(
+  source: string | Buffer | PathLike | Uint8Array, 
+  maskSource: string | Buffer | PathLike | Uint8Array, 
+  options: MaskOptions = { type: "alpha" }
+): Promise<Buffer> {
+  const img = await loadImage(source);
+  const mask = await loadImage(maskSource);
+
+  const canvas = createCanvas(img.width, img.height);
+  const ctx = canvas.getContext("2d") as SKRSContext2D;
+
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+
+  const maskCanvas = createCanvas(img.width, img.height);
+  const maskCtx = maskCanvas.getContext("2d") as SKRSContext2D;
+  maskCtx.drawImage(mask, 0, 0, img.width, img.height);
+
+  const maskData = maskCtx.getImageData(0, 0, img.width, img.height);
+  const imgData = ctx.getImageData(0, 0, img.width, img.height);
+
+  for (let i = 0; i < maskData.data.length; i += 4) {
+      let alphaValue = 255;
+
+      if (options.type === "grayscale") {
+          const grayscale = maskData.data[i] * 0.3 + maskData.data[i + 1] * 0.59 + maskData.data[i + 2] * 0.11;
+          alphaValue = grayscale >= (options.threshold ?? 128) ? 255 : 0;
+      } else if (options.type === "alpha") {
+          alphaValue = maskData.data[i + 3];
+      } else if (options.type === "color" && options.colorKey) {
+          const colorMatch =
+              maskData.data[i] === parseInt(options.colorKey.slice(1, 3), 16) &&
+              maskData.data[i + 1] === parseInt(options.colorKey.slice(3, 5), 16) &&
+              maskData.data[i + 2] === parseInt(options.colorKey.slice(5, 7), 16);
+          alphaValue = colorMatch ? 0 : 255;
+      }
+
+      if (options.invert) alphaValue = 255 - alphaValue;
+
+      imgData.data[i + 3] = alphaValue;
+  }
+
+  ctx.putImageData(imgData, 0, 0);
+
+  return canvas.toBuffer("image/png");
+}
+
+async gradientBlend(
+  source: string | Buffer | PathLike | Uint8Array, 
+  options: BlendOptions
+): Promise<Buffer> {
+  const img = await loadImage(source);
+  const canvas = createCanvas(img.width, img.height);
+  const ctx = canvas.getContext("2d") as SKRSContext2D;
+
+  ctx.drawImage(img, 0, 0, img.width, img.height);
+
+  let gradient: CanvasGradient;
+  if (options.type === "linear") {
+      const angle = options.angle ?? 0;
+      const radians = (angle * Math.PI) / 180;
+      const x1 = img.width / 2 - (Math.cos(radians) * img.width) / 2;
+      const y1 = img.height / 2 - (Math.sin(radians) * img.height) / 2;
+      const x2 = img.width / 2 + (Math.cos(radians) * img.width) / 2;
+      const y2 = img.height / 2 + (Math.sin(radians) * img.height) / 2;
+      gradient = ctx.createLinearGradient(x1, y1, x2, y2);
+  } else if (options.type === "radial") {
+      gradient = ctx.createRadialGradient(
+          img.width / 2, img.height / 2, 0, img.width / 2, img.height / 2, Math.max(img.width, img.height)
+      );
+  } else {
+      gradient = ctx.createConicGradient(Math.PI, img.width / 2, img.height / 2);
+  }
+
+  options.colors.forEach(({ stop, color }: any) => gradient.addColorStop(stop, color));
+  ctx.fillStyle = gradient;
+
+  ctx.globalCompositeOperation = options.blendMode ?? "multiply";
+  ctx.fillRect(0, 0, img.width, img.height);
+
+  if (options.maskSource) {
+      const mask = await loadImage(options.maskSource);
+      ctx.globalCompositeOperation = "destination-in";
+      ctx.drawImage(mask, 0, 0, img.width, img.height);
+  }
+
+  ctx.globalCompositeOperation = "source-over";
+
+  return canvas.toBuffer("image/png");
+}
+
+async animate(
+  frames: Frame[],
+  defaultDuration: number, 
+  defaultWidth: number = 800,
+  defaultHeight: number = 600, 
+  options?: {
+      gif?: boolean;  
+      gifPath?: string;  
+      onStart?: () => void;
+      onFrame?: (index: number) => void;
+      onEnd?: () => void;
+  }
+): Promise<Buffer[] | undefined> {
+  const buffers: Buffer[] = [];
+  const isNode = typeof process !== 'undefined' && process.versions != null && process.versions.node != null;
+
+  if (options?.onStart) options.onStart();
+
+  let encoder: GIFEncoder | null = null;
+  let gifStream: fs.WriteStream | null = null;
+
+  if (options?.gif) {
+      if (!options.gifPath) {
+          throw new Error("GIF generation enabled but no gifPath provided.");
+      }
+      encoder = new GIFEncoder(defaultWidth, defaultHeight);
+      gifStream = fs.createWriteStream(options.gifPath);
+      encoder.createReadStream().pipe(gifStream);
+      encoder.start();
+      encoder.setRepeat(0); 
+      encoder.setQuality(10); 
+  }
+
+  for (let i = 0; i < frames.length; i++) {
+      const frame = frames[i];
+
+      const width = frame.width || defaultWidth;
+      const height = frame.height || defaultHeight;
+      const canvas = createCanvas(width, height);
+      const ctx: SKRSContext2D = canvas.getContext('2d');
+
+      if (!isNode) {
+          canvas.width = width;
+          canvas.height = height;
+          document.body.appendChild(canvas as unknown as Node);
+      }
+
+      ctx.clearRect(0, 0, width, height);
+
+      if (frame.transformations) {
+          const { scaleX = 1, scaleY = 1, rotate = 0, translateX = 0, translateY = 0 } = frame.transformations;
+          ctx.save(); 
+          ctx.translate(translateX, translateY);
+          ctx.rotate((rotate * Math.PI) / 180);
+          ctx.scale(scaleX, scaleY);
+      }
+
+      let fillStyle: string | CanvasGradient | CanvasPattern | null = null;
+
+      if (frame.gradient) {
+          const { type, startX, startY, endX, endY, startRadius, endRadius, colors } = frame.gradient;
+          let gradient: CanvasGradient | null = null;
+
+          if (type === 'linear') {
+              gradient = ctx.createLinearGradient(startX || 0, startY || 0, endX || width, endY || height);
+          } else if (type === 'radial') {
+              gradient = ctx.createRadialGradient(
+                  startX || width / 2,
+                  startY || height / 2,
+                  startRadius || 0,
+                  endX || width / 2,
+                  endY || height / 2,
+                  endRadius || Math.max(width, height)
+              );
+          }
+
+          colors.forEach((colorStop: any) => {
+              if (gradient) gradient.addColorStop(colorStop.stop, colorStop.color);
+          });
+
+          fillStyle = gradient;
+      }
+
+      if (frame.pattern) {
+          const patternImage = await loadImage(frame.pattern.source);
+          const pattern = ctx.createPattern(patternImage, frame.pattern.repeat || 'repeat');
+          fillStyle = pattern;
+      }
+
+      if (!fillStyle && frame.backgroundColor) {
+          fillStyle = frame.backgroundColor;
+      }
+
+      if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fillRect(0, 0, width, height);
+      }
+
+      if (frame.source) {
+          const image = await loadImage(frame.source);
+          ctx.globalCompositeOperation = frame.blendMode || 'source-over';
+          ctx.drawImage(image, 0, 0, width, height);
+      }
+
+      if (frame.onDrawCustom) {
+          frame.onDrawCustom(ctx as unknown as SKRSContext2D, canvas);
+      }
+
+      if (frame.transformations) {
+          ctx.restore();
+      }
+
+      const buffer = canvas.toBuffer('image/png');
+      buffers.push(buffer);
+
+      if (encoder) {
+         
+          const frameDuration = frame.duration || defaultDuration;
+          encoder.setDelay(frameDuration); 
+          encoder.addFrame(ctx as unknown as CanvasRenderingContext2D); 
+      }
+
+      if (options?.onFrame) options.onFrame(i);
+      
+      await new Promise(resolve => setTimeout(resolve, frame.duration || defaultDuration));
+  }
+
+  if (encoder) {
+      encoder.finish();
+  }
+
+  if (options?.onEnd) options.onEnd();
+
+  return options?.gif ? undefined : buffers;
+}
+
+
+
+public validHex(hexColor: string): any {
+    const hexPattern = /^#[0-9a-fA-F]{6}$/;
+    if (!hexPattern.test(hexColor)) {
+        throw new Error("Invalid hexadecimal color format. It should be in the format '#RRGGBB'.");
+    }
+    return true
+  }
+
+  public async outPut(results: any): Promise< void | Buffer | string | Blob | Object | HTMLCanvasElement> {
+
+    const formatType: string = this.format?.type || 'buffer';
+    switch (formatType) {
+      case 'buffer':
+        return results;
+      case 'url':
+        return await url(results);
+      case 'dataURL':
+        return dataURL(results);
+      case 'blob':
+        return blob(results);
+      case 'base64':
+        return base64(results);
+      case 'arraybuffer':
+        return arrayBuffer(results);
+      default:
+        throw new Error('Unsupported format');
+    }
+  }
 }