apexify.js 4.9.26 → 4.9.28

package/dist/esm/Canvas/ApexPainter.js

@@ -12,92 +12,489 @@ const axios_1 = __importDefault(require("axios"));
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const utils_1 = require("./utils/utils");
+const enhancedTextRenderer_1 = require("./utils/Texts/enhancedTextRenderer");
+const enhancedPatternRenderer_1 = require("./utils/Patterns/enhancedPatternRenderer");
 class ApexPainter {
     format;
     constructor({ type } = { type: 'buffer' }) {
         this.format = { type: type || 'buffer' };
     }
+    /**
+     * Validates image properties for required fields.
+     * @private
+     * @param ip - Image properties to validate
+     */
+    #validateImageProperties(ip) {
+        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) {
+        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, textProps) {
+        await enhancedTextRenderer_1.EnhancedTextRenderer.renderText(ctx, textProps);
+    }
     /**
      * 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.
+     * @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) {
-        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 = (0, canvas_1.createCanvas)(width, height);
-        const ctx = canvasInstance.getContext('2d');
-        if (!ctx) {
-            throw new Error('Unable to get 2D rendering context from canvas');
-        }
+        // Handle inherit sizing
+        if (canvas.customBg?.inherit) {
+            let p = canvas.customBg.source;
+            if (!/^https?:\/\//i.test(p))
+                p = path_1.default.join(process.cwd(), p);
+            try {
+                const img = await (0, canvas_1.loadImage)(p);
+                canvas.width = img.width;
+                canvas.height = img.height;
+            }
+            catch (e) {
+                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 = (0, canvas_1.createCanvas)(width, height);
+        const ctx = cv.getContext('2d');
+        if (!ctx)
+            throw new Error('Unable to get 2D context');
         ctx.globalAlpha = opacity;
-        (0, utils_1.applyRotation)(ctx, rotation, x, y, width, height);
-        (0, utils_1.applyShadow)(ctx, shadow, x, y, width, height);
+        // ---- BACKGROUND (clipped) ----
         ctx.save();
-        if (borderRadius) {
-            (0, utils_1.backgroundRadius)(ctx, x, y, width, height, borderRadius, borderPosition);
-        }
+        (0, utils_1.applyRotation)(ctx, rotation, x, y, width, height);
+        (0, utils_1.buildPath)(ctx, x, y, width, height, borderRadius, borderPosition);
+        ctx.clip();
+        (0, utils_1.applyCanvasZoom)(ctx, width, height, zoom);
         ctx.translate(x, y);
-        if (customBg) {
-            await (0, utils_1.customBackground)(ctx, canvas, zoom, blur);
-        }
-        else if (gradientBg) {
-            await (0, utils_1.drawBackgroundGradient)(ctx, canvas, zoom, blur);
-        }
-        else {
-            await (0, utils_1.drawBackgroundColor)(ctx, canvas, zoom, blur);
-        }
+        if (typeof blendMode === 'string') {
+            ctx.globalCompositeOperation = blendMode;
+        }
+        if (customBg)
+            await (0, utils_1.customBackground)(ctx, { ...canvas, blur });
+        else if (gradientBg)
+            await (0, utils_1.drawBackgroundGradient)(ctx, { ...canvas, blur });
+        else
+            await (0, utils_1.drawBackgroundColor)(ctx, { ...canvas, blur, colorBg: colorBg ?? '#000' });
+        if (patternBg)
+            await enhancedPatternRenderer_1.EnhancedPatternRenderer.renderPattern(ctx, cv, patternBg);
+        if (noiseBg)
+            (0, utils_1.applyNoise)(ctx, width, height, noiseBg.intensity ?? 0.05);
         ctx.restore();
-        (0, utils_1.applyStroke)(ctx, stroke, x, y, width, height);
-        return { buffer: canvasInstance.toBuffer('image/png'), canvas };
+        // Apply shadow effect
+        if (shadow) {
+            ctx.save();
+            (0, utils_1.buildPath)(ctx, x, y, width, height, borderRadius, borderPosition);
+            (0, utils_1.applyShadow)(ctx, shadow, x, y, width, height);
+            ctx.restore();
+        }
+        // Apply stroke effect
+        if (stroke) {
+            ctx.save();
+            (0, utils_1.buildPath)(ctx, x, y, width, height, borderRadius, borderPosition);
+            (0, utils_1.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 - 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.
+     *
+     * @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, canvasBuffer) {
-        if (!Array.isArray(images)) {
-            images = [images];
+        const list = Array.isArray(images) ? images : [images];
+        // Load base canvas buffer
+        const base = Buffer.isBuffer(canvasBuffer)
+            ? await (0, canvas_1.loadImage)(canvasBuffer)
+            : await (0, canvas_1.loadImage)(canvasBuffer.buffer);
+        const cv = (0, canvas_1.createCanvas)(base.width, base.height);
+        const ctx = cv.getContext("2d");
+        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, ip) {
+        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 ((0, utils_1.isShapeSource)(source)) {
+            await this.#drawShape(ctx, source, x, y, width ?? 100, height ?? 100, {
+                ...shape,
+                rotation,
+                opacity,
+                blur,
+                borderRadius,
+                borderPosition,
+                shadow,
+                stroke,
+                boxBackground,
+                filters
+            });
+            return;
         }
-        let baseImage;
-        if (Buffer.isBuffer(canvasBuffer)) {
-            baseImage = await (0, canvas_1.loadImage)(canvasBuffer);
+        // Handle image sources
+        const img = await (0, utils_1.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
+        (0, utils_1.applyRotation)(ctx, rotation, box.x, box.y, box.w, box.h);
+        // 1) Shadow (independent) — supports gradient or color
+        (0, utils_1.applyShadow)(ctx, box, shadow);
+        // 2) Optional box background (under bitmap, inside clip) — color or gradient
+        (0, utils_1.drawBoxBackground)(ctx, box, boxBackground, borderRadius, borderPosition);
+        // 3) Clip to image border radius, then draw the bitmap with blur/opacity and fit/align
+        ctx.save();
+        (0, utils_1.buildPath)(ctx, box.x, box.y, box.w, box.h, borderRadius, borderPosition);
+        ctx.clip();
+        const { dx, dy, dw, dh, sx, sy, sw, sh } = (0, utils_1.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 (0, utils_1.applySimpleProfessionalFilters)(ctx, filters, dw, dh);
         }
-        else if (canvasBuffer.buffer) {
-            baseImage = await (0, canvas_1.loadImage)(canvasBuffer.buffer);
+        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
+        (0, utils_1.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, shapeType, x, y, width, height, options) {
+        const box = { x, y, w: width, h: height };
+        ctx.save();
+        // Apply rotation
+        if (options.rotation) {
+            (0, utils_1.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 {
-            throw new Error('Invalid canvasBuffer provided; expected Buffer or CanvasResults with a buffer');
+        else if (options.shadow) {
+            // Use standard shadow for simple shapes
+            (0, utils_1.applyShadow)(ctx, box, options.shadow);
         }
-        if (!baseImage) {
-            throw new Error('Unable to load base image from the provided buffer');
+        // 2) Optional box background
+        if (options.boxBackground) {
+            (0, utils_1.drawBoxBackground)(ctx, box, options.boxBackground, options.borderRadius, options.borderPosition);
         }
-        const canvas = (0, canvas_1.createCanvas)(baseImage.width, baseImage.height);
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            throw new Error('Unable to get 2D rendering context from canvas');
+        // 3) Draw the shape
+        ctx.save();
+        if (options.borderRadius) {
+            (0, utils_1.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 (0, utils_1.applySimpleProfessionalFilters)(ctx, options.filters, width, height);
+        }
+        (0, utils_1.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
+            });
         }
-        ctx.drawImage(baseImage, 0, 0);
-        for (const imageProps of images) {
-            await this.drawImage(ctx, imageProps);
+        else if (options.stroke) {
+            // Use standard stroke for simple shapes
+            (0, utils_1.applyStroke)(ctx, box, options.stroke);
         }
-        return canvas.toBuffer('image/png');
+        // 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) {
+        return shapeType === 'heart' || shapeType === 'star';
     }
-    async createText(textOptionsArray, buffer) {
+    /**
+     * 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, shapeType, x, y, width, height, shadow, shapeProps) {
+        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 = (0, utils_1.createGradientFill)(ctx, gradient, { x: x + offsetX, y: y + offsetY, w: width, h: height });
+            ctx.fillStyle = gfill;
+        }
+        else {
+            ctx.fillStyle = color;
+        }
+        // Create shadow path
+        (0, utils_1.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, shapeType, x, y, width, height, stroke, shapeProps) {
+        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 = (0, utils_1.createGradientFill)(ctx, gradient, { x, y, w: width, h: height });
+            ctx.strokeStyle = gstroke;
+        }
+        else {
+            ctx.strokeStyle = color;
+        }
+        ctx.lineWidth = strokeWidth;
+        // Create stroke path
+        (0, utils_1.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, canvasBuffer) {
         try {
-            if (!Array.isArray(textOptionsArray)) {
-                textOptionsArray = [textOptionsArray];
+            // 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;
-            if (Buffer.isBuffer(buffer)) {
-                existingImage = await (0, canvas_1.loadImage)(buffer);
+            if (Buffer.isBuffer(canvasBuffer)) {
+                existingImage = await (0, canvas_1.loadImage)(canvasBuffer);
             }
-            else if (buffer && buffer.buffer) {
-                existingImage = await (0, canvas_1.loadImage)(buffer.buffer);
+            else if (canvasBuffer && canvasBuffer.buffer) {
+                existingImage = await (0, canvas_1.loadImage)(canvasBuffer.buffer);
             }
             else {
                 throw new Error('Invalid canvasBuffer provided. It should be a Buffer or CanvasResults object with a buffer');
@@ -105,21 +502,23 @@ class ApexPainter {
             if (!existingImage) {
                 throw new Error('Unable to load image from buffer');
             }
+            // Create new canvas with same dimensions
             const canvas = (0, canvas_1.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);
-            for (const textOptions of textOptionsArray) {
-                const mergedTextOptions = textOptions;
-                if (mergedTextOptions.fontPath) {
-                    canvas_1.GlobalFonts.registerFromPath(path_1.default.join(process.cwd(), mergedTextOptions.fontPath), (mergedTextOptions.fontName || 'customFont'));
-                }
-                (0, utils_1.drawText)(ctx, mergedTextOptions);
+            // 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 loading existing image:", error);
-            throw new Error("Invalid image buffer");
+            console.error("Error creating text:", error);
+            throw new Error("Failed to create text on canvas");
         }
     }
     async createCustom(options, buffer) {
@@ -362,60 +761,6 @@ class ApexPainter {
         }
     }
     async drawImage(ctx, image) {
-        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) {
-            (0, utils_1.drawShape)(ctx, { source, x, y, width, height, opacity, rotation, borderRadius, stroke, shadow, isFilled, color, gradient, borderPosition, filling });
-            return;
-        }
-        let loadedImage;
-        try {
-            if (source.startsWith('http')) {
-                loadedImage = await (0, canvas_1.loadImage)(source);
-            }
-            else {
-                const imagePath = path_1.default.resolve(process.cwd(), source);
-                loadedImage = await (0, canvas_1.loadImage)(imagePath);
-            }
-        }
-        catch (e) {
-            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)`;
-        }
-        (0, utils_1.applyRotation)(ctx, rotation, x, y, width, height);
-        (0, utils_1.applyShadow)(ctx, shadow, x, y, width, height);
-        if (perspective) {
-            throw new Error('Under construction');
-        }
-        (0, utils_1.imageRadius)(ctx, loadedImage, x, y, width, height, borderRadius, borderPosition);
-        ctx.globalAlpha = 1.0;
-        if (stroke?.opacity)
-            ctx.globalAlpha = stroke.opacity;
-        (0, utils_1.applyStroke)(ctx, stroke, x, y, width, height, undefined);
-        ctx.globalAlpha = 1.0;
-        ctx.restore();
     }
     async extractFrames(videoSource, options) {
         const frames = [];
@@ -481,242 +826,6 @@ class ApexPainter {
             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, options) {
-        const img = await (0, canvas_1.loadImage)(buffer);
-        const canvas = (0, canvas_1.createCanvas)(img.width, img.height);
-        const ctx = 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.
-     */
-    async fillWithGradient(ctx, width, height, gradient, x = 0, y = 0) {
-        let grad;
-        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) => {
-            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.
-     */
-    async drawDotsPattern(ctx, width, height, options, x = 0, y = 0) {
-        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.
-     */
-    async drawStripesPattern(ctx, width, height, options, x = 0, y = 0) {
-        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.
-   */
-    async drawGridPattern(ctx, width, height, options, x = 0, y = 0) {
-        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.
-     */
-    async drawCheckerboardPattern(ctx, width, height, options, x = 0, y = 0) {
-        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.
-     */
-    async drawCustomPattern(ctx, width, height, options, x = 0, y = 0) {
-        if (!options.customPatternImage) {
-            throw new Error('Custom pattern image path is required for custom patterns.');
-        }
-        const patternImage = await (0, canvas_1.loadImage)(options.customPatternImage);
-        const pattern = ctx.createPattern(patternImage, 'repeat');
-        ctx.fillStyle = pattern;
-        ctx.translate(x, y);
-        ctx.fillRect(0, 0, width, height);
-        ctx.resetTransform();
-    }
-    async drawWavePattern(ctx, width, height, options, 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();
-        }
-    }
-    async drawNoisePattern(ctx, width, height, 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);
-    }
-    async drawDiagonalCheckerboardPattern(ctx, width, height, options, 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, maskSource, options = { type: "alpha" }) {
         const img = await (0, canvas_1.loadImage)(source);
         const mask = await (0, canvas_1.loadImage)(maskSource);