apexify.js 4.6.2 → 4.6.3

package/lib/canvas/ApexPainter.ts

@@ -6,13 +6,10 @@ import axios from 'axios';
 import fs from "fs";
 import path from "path";
 import { OutputFormat, CanvasConfig, TextObject, ImageProperties, GIFOptions, GIFResults, CustomOptions, cropOptions,
-     drawBackgroundGradient, drawBackgroundColor, customBackground, circularBorder, radiusBorder, customLines, applyRotation, applyStroke,
+     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,
-     applyZoom,
-     ResizeOptions,
-     applyPerspective
+     PatternOptions, ExtractFramesOptions, backgroundRadius, applyZoom, ResizeOptions, applyPerspective
     } from "./utils/utils";
 
   interface CanvasResults {
@@ -49,7 +46,8 @@ export class ApexPainter {
       shadow,
       borderPosition = 'all',
       opacity = 1,
-      zoom
+      zoom,
+      blur
     } = canvas;
   
     const canvasInstance = createCanvas(width, height);
@@ -64,23 +62,20 @@ export class ApexPainter {
     applyShadow(ctx, shadow, x, y, width, height);
   
     ctx.save();
-    if (typeof borderRadius === 'string') {
-      circularBorder(ctx, width, height);
-    } else if (typeof borderRadius === 'number') {
-      radiusBorder(ctx, x, y, width, height, borderRadius, borderPosition);
+    if (borderRadius) {
+      backgroundRadius(ctx, x, y, width, height, borderRadius, borderPosition);
     }
 
-    // ctx.translate(x, y);
-
-    // applyZoom(ctx, zoom);
+    ctx.translate(x, y);
 
     if (customBg) {
-      await customBackground(ctx, canvas);
+      await customBackground(ctx, canvas, zoom, blur);
     } else if (gradientBg) {
-      await drawBackgroundGradient(ctx, canvas);
+      await drawBackgroundGradient(ctx, canvas, zoom, blur);
     } else {
-      await drawBackgroundColor(ctx, canvas);
+      await drawBackgroundColor(ctx, canvas, zoom, blur);
     }
+
     ctx.restore();
 
     applyStroke(ctx, stroke, x, y, width, height);
@@ -165,12 +160,12 @@ export class ApexPainter {
                
                 GlobalFonts.registerFromPath(
                   path.join(process.cwd(), mergedTextOptions.fontPath),
-                    mergedTextOptions.fontName,
+                    (mergedTextOptions.fontName || 'customFont'),
                 );
             }
 
             const size = { width: existingImage.width, height: existingImage.height };
-            drawText(ctx, mergedTextOptions, size);
+            drawText(ctx, mergedTextOptions);
         }
 
         return canvas.toBuffer("image/png");
@@ -469,87 +464,83 @@ async createGIF(gifFrames: { background: string; duration: number }[], options:
     }
   }
 
-  private async drawImage(
-    ctx: SKRSContext2D,
-    image: ImageProperties
-  ): Promise<void> {
+  private async drawImage(ctx: SKRSContext2D, image: ImageProperties): Promise<void> {
     const {
       source,
-      x,
-      y,
-      width,
-      height,
+      x, y, width, height,
       rotation = 0,
       borderRadius = 0,
-      stroke,
-      shadow,
-      isFilled,
-      color,
-      gradient,
+      stroke, shadow,
+      isFilled, color, gradient,
       borderPosition = 'all',
       opacity,
-      perspective
+      perspective,
+      blur = 0,
+      zoom,
+      filling
     } = image;
     
-    if (
-      !source ||
-      typeof x !== 'number' ||
-      typeof y !== 'number' ||
-      typeof width !== 'number' ||
-      typeof height !== 'number'
-    ) {
+    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'];
+  
+    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 (opacity !== undefined) {
       ctx.globalAlpha = opacity;
     }
-    
+  
     if (isShape) {
-      drawShape(ctx, { source, x, y, width, height, rotation, borderRadius, stroke, shadow, isFilled, color, gradient, borderPosition });
+      drawShape(ctx, { source, x, y, width, height, rotation, borderRadius, stroke, shadow, isFilled, color, gradient, borderPosition, filling });
       ctx.globalAlpha = 1.0;
       return;
     }
-    
+  
     let loadedImage: Image | undefined;
     try {
       if (source.startsWith('http')) {
         loadedImage = await loadImage(source);
       } else {
-        const imagePath = path.join(process.cwd(), source);
+        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 (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')
-        // const offscreen = createCanvas(width, height);
-        // const offCtx = offscreen.getContext('2d') as SKRSContext2D;
-        // offCtx.clearRect(0, 0, width, height);
-        
-        // await applyPerspective(offCtx, loadedImage, 0, 0, width, height, perspective, 10, 10);
-        
-        // imageRadius(ctx, offscreen, x, y, width, height, borderRadius, borderPosition);
+      throw new Error('Under construction');
     }
-
+  
     imageRadius(ctx, loadedImage, x, y, width, height, borderRadius, borderPosition);
-
-    applyStroke(ctx, stroke, x, y, width, height);
+    applyStroke(ctx, stroke, x, y, width, height, undefined, true);
+  
     ctx.restore();
-    
     ctx.globalAlpha = 1.0;
   }
   
@@ -997,7 +988,7 @@ async animate(
       }
 
       if (frame.onDrawCustom) {
-          frame.onDrawCustom(ctx as unknown as CanvasRenderingContext2D, canvas);
+          frame.onDrawCustom(ctx as unknown as SKRSContext2D, canvas);
       }
 
       if (frame.transformations) {

package/lib/canvas/Themes/Level-Up/levelup.ts

@@ -0,0 +1,183 @@
+import { ApexPainter, CanvasConfig, ImageProperties, TextObject } from "../../../index";
+
+const Image = new ApexPainter();
+
+/**
+ * Generates a level-up card.
+ * @param {string} userPfp - User profile picture URL.
+ * @param {string} username - Username.
+ * @param {string} [levelUpmsg="Well done user. You had leveled up 🔥🔥"] - Custom level-up message.
+ * @param {string} prevLevel - Previous level before leveling up.
+ * @param {string} nextLevel - Next level after leveling up.
+ * @returns {Promise<Buffer>} - The generated level-up image.
+ */
+export async function level_up_1(
+    userPfp: string,
+    username: string,
+    levelUpmsg: string = "Well done user. You had leveled up 🔥🔥",
+    prevLevel: string,
+    nextLevel: string
+): Promise<Buffer> {
+
+    /** Helper function to detect Arabic text */
+    const isArabic = (text: string) => /[\u0600-\u06FF]/.test(text);
+
+    /** Helper function to shuffle an array */
+    function shuffleArray<T>(array: T[]): T[] {
+        return array.sort(() => Math.random() - 0.5);
+    }
+
+    /** Extracts and returns random colors from the dominant colors */
+    function getRandomColors(colors: { color: string }[]): string[] {
+        if (colors.length === 0) return ["rgb(0, 255, 247)", "rgb(157, 0, 255)", "rgb(255, 94, 0)"];
+        return shuffleArray(colors).slice(0, 5).map(c => `rgb(${c.color})`);
+    }
+
+    // 1. **Canvas Configuration**
+    const canvasConfig: CanvasConfig = {
+        customBg: './bg.png',
+        width: 1599, height: 876,
+        zoom: {}
+    };
+
+    const bg = await Image.createCanvas(canvasConfig);
+
+    // 2. **Extract Dominant Colors for Gradients**
+    const dominantColors = await Image.colorAnalysis(userPfp);
+    const gradientColors = getRandomColors(dominantColors).map((color, index) => ({
+        stop: index / 4, color
+    }));
+    const shadowGradient = [...gradientColors];
+
+    // 3. **User Profile Picture Configuration**
+    const imgs: ImageProperties[] = [{
+        source: userPfp,
+        width: 240, height: 240,
+        x: 235, y: 235,
+        blur: 0.4,
+        borderRadius: 'circular',
+        stroke: {
+            width: 8, position: 5, blur: 0.5,
+            borderRadius: 'circular',
+            gradient: {
+                type: 'linear',
+                startX: 200, startY: 200,
+                endX: 290, endY: 290,
+                colors: gradientColors
+            }
+        },
+        shadow: {
+            gradient: {
+                type: 'linear',
+                startX: 220, startY: 220,
+                endX: 270, endY: 270,
+                colors: shadowGradient
+            },
+            opacity: 0.7,
+            blur: 25,
+            borderRadius: 90,
+            offsetX: 0, offsetY: 0,
+        }
+    }];
+
+    const img = await Image.createImage(imgs, bg);
+
+    // 4. **Username Text Handling**
+    const maxLength = isArabic(username) ? 12 : 10;
+    let displayName = username.length > maxLength
+        ? isArabic(username)
+            ? '...' + username.slice(-maxLength)
+            : username.slice(0, maxLength - 3) + '...'
+        : username;
+
+    let xPos = isArabic(username) ? Math.max(480 - (displayName.length - 4) * 3, 190) - 30 : 300 - Math.min((displayName.length - 3) * 10, 110);
+
+    // 5. **Message Text Alignment**
+    const container = { width: 590, height: 235, x: 810, y: 520 };
+    const fontName = isArabic(levelUpmsg) ? 'Segoe UI' : 'Segoe UI Emoji';
+    const textX = isArabic(levelUpmsg) ? container.x + 290 : container.x + 285;
+
+    // 6. **Dynamic Level Positioning Function**
+    function getLevelPosition(level: string, isNext: boolean) {
+        let x = isNext ? 1320 : 885;
+        let y = 455;
+        let fontSize = 72;
+
+        if (level.length === 3) {
+            x = isNext ? 1323 : 888;
+            y = 455;
+            fontSize = 63;
+        }
+
+        return { x, y, fontSize };
+    }
+
+    const prevLevelConfig = getLevelPosition(prevLevel, false);
+    const nextLevelConfig = getLevelPosition(nextLevel, true);
+
+    // 7. **Text Elements Configuration**
+    const txts: TextObject[] = [
+        {
+            text: displayName,
+            x: xPos, y: 600,
+            fontSize: 54,
+            fontName: 'Segoe UI',
+            textAlign: isArabic(username) ? 'right' : 'left',
+            gradient: {
+                type: 'linear',
+                startX: 0, startY: 0,
+                endX: 0, endY: 50,
+                colors: [
+                    { stop: 0, color: '#ffffff' },
+                    { stop: 1, color: '#66e6ff' }
+                ]
+            },
+            stroke: { width: 3, color: '#9d00ff' },
+            shadow: { color: '#66e6ff', opacity: 0.4, blur: 8, offsetX: 0, offsetY: 0 }
+        },
+        {
+            text: levelUpmsg,
+            x: textX, y: container.y + 60,
+            fontSize: 34,
+            fontName: fontName,
+            textAlign: 'center',
+            maxWidth: container.width - 30,
+            lineHeight: 42,
+            maxHeight: container.height - 30,
+            gradient: {
+                type: 'linear',
+                startX: 0, startY: 0,
+                endX: 0, endY: 50,
+                colors: [
+                    { stop: 0, color: '#f9ff00' },
+                    { stop: 1, color: '#ff6a00' }
+                ]
+            },
+            stroke: { width: 2, color: '#ff9d00' },
+            shadow: { color: '#ffcc00', opacity: 0.5, blur: 10, offsetX: 0, offsetY: 0 }
+        },
+        {
+            text: prevLevel,
+            x: prevLevelConfig.x, y: prevLevelConfig.y,
+            fontSize: prevLevelConfig.fontSize,
+            fontName: "Bahnschrift",
+            textAlign: "center",
+            gradient: { type: "linear", startX: 0, startY: 0, endX: 0, endY: 80, colors: [{ stop: 0, color: "#00FFFF" }, { stop: 1, color: "#007BFF" }] },
+            stroke: { width: 6, color: "#0033FF" },
+            shadow: { color: "#00BFFF", opacity: 0.6, blur: 15, offsetX: 0, offsetY: 0 }
+        },
+        {
+            text: nextLevel,
+            x: nextLevelConfig.x, y: nextLevelConfig.y,
+            fontSize: nextLevelConfig.fontSize,
+            fontName: "Bahnschrift",
+            textAlign: "center",
+            gradient: { type: "linear", startX: 0, startY: 0, endX: 0, endY: 80, colors: [{ stop: 0, color: "#00FFFF" }, { stop: 1, color: "#007BFF" }] },
+            stroke: { width: 6, color: "#0033FF" },
+            shadow: { color: "#00BFFF", opacity: 0.6, blur: 15, offsetX: 0, offsetY: 0 }
+        }
+    ];
+
+    // 8. **Render Final Image**
+    return await Image.createText(txts, img);
+}

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

@@ -1,97 +1,211 @@
 import { loadImage, SKRSContext2D } from "@napi-rs/canvas";
-import { CanvasConfig } from '../types';
-import path from 'path';
+import { CanvasConfig } from "../types";
+import path from "path";
 
+interface ZoomConfig {
+    scale?: number;
+    x?: number;
+    y?: number;
+}
 
 /**
- * Draws a gradient background on the canvas.
- * No zoom logic is applied.
+ * Draws a gradient background on the canvas with optional zoom support.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
  */
-export async function drawBackgroundGradient(ctx: SKRSContext2D, canvas: CanvasConfig): Promise<void> {
+export async function drawBackgroundGradient(
+    ctx: SKRSContext2D,
+    canvas: CanvasConfig,
+    zoom?: ZoomConfig,
+    blur?: number
+): Promise<void> {
     if (canvas.gradientBg) {
-      const {
-        type,
-        startX = 0,
-        startY = 0,
-        endX = canvas.width || 500,
-        endY = canvas.height || 500,
-        startRadius = 0,
-        endRadius = 0,
-        colors
-      } = canvas.gradientBg;
-  
-      if (!colors || colors.length === 0) {
-        throw new Error('You need to provide colors for the gradient.');
-      }
-  
-      let gradient;
-      if (type === 'linear' || type === undefined) {
-        gradient = ctx.createLinearGradient(startX, startY, endX, endY);
-      } else if (type === 'radial') {
-        gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
-      } else {
-        throw new Error('Unsupported gradient type.');
-      }
-  
-      for (const { stop, color } of colors) {
-        gradient.addColorStop(stop as number, color as string);
+        const {
+            type,
+            startX = 0,
+            startY = 0,
+            endX = canvas.width || 500,
+            endY = canvas.height || 500,
+            startRadius = 0,
+            endRadius = 0,
+            colors
+        } = canvas.gradientBg;
+
+        if (!colors || colors.length === 0) {
+            throw new Error("You need to provide colors for the gradient.");
+        }
+
+        let gradient;
+        if (type === "linear" || type === undefined) {
+            let finalStartX = startX, finalStartY = startY, finalEndX = endX, finalEndY = endY;
+
+            if (zoom) {
+                const scale = Math.max(1, zoom.scale || 1);
+                finalStartX = (zoom.x || 0) - (endX - startX) / (2 * scale);
+                finalStartY = (zoom.y || 0) - (endY - startY) / (2 * scale);
+                finalEndX = (zoom.x || 0) + (endX - startX) / (2 * scale);
+                finalEndY = (zoom.y || 0) + (endY - startY) / (2 * scale);
+            }
+
+            gradient = ctx.createLinearGradient(finalStartX, finalStartY, finalEndX, finalEndY);
+        } else if (type === "radial") {
+            gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
+        } else {
+            throw new Error("Unsupported gradient type.");
+        }
+
+        for (const { stop, color } of colors) {
+            gradient.addColorStop(stop as number, color as string);
+        }
+
+        if (blur) {
+          ctx.filter = `blur(${blur}px)`;
       }
-  
-      const canvasWidth = canvas.width || 500;
-      const canvasHeight = canvas.height || 500;
+
       ctx.fillStyle = gradient;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+      ctx.fillRect(0, 0, canvas.width || 500, canvas.height || 500);
+
+      ctx.filter = "none";
     }
 }
-  
+
 /**
- * Draws a solid background color on the canvas.
- * No zoom logic is applied.
+ * Draws a solid background color on the canvas with optional zoom effect.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
  */
-export async function drawBackgroundColor(ctx: SKRSContext2D, canvas: CanvasConfig): Promise<void> {
+export async function drawBackgroundColor(
+    ctx: SKRSContext2D,
+    canvas: CanvasConfig,
+    zoom?: ZoomConfig,
+    blur?: number
+): Promise<void> {
     const canvasWidth = canvas.width || 500;
     const canvasHeight = canvas.height || 500;
-  
-    // Fill the entire area starting at (0,0) (assuming translation is handled elsewhere)
-    if (canvas.colorBg !== 'transparent') {
-      ctx.fillStyle = canvas.colorBg as string;
-      ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+    ctx.save();
+
+
+    if (blur) {
+      ctx.filter = `blur(${blur}px)`;
+  }
+
+    if (zoom) {
+        const scale = Math.max(1, zoom.scale || 1);
+        const zoomedWidth = canvasWidth / scale;
+        const zoomedHeight = canvasHeight / scale;
+
+        ctx.scale(scale, scale);
+        ctx.translate((zoom.x || 0) + zoomedWidth / 2, (zoom.y || 0) + zoomedHeight / 2);
     }
+
+    if (canvas.colorBg !== "transparent") {
+        ctx.fillStyle = canvas.colorBg as string;
+        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    }
+
+    ctx.filter = "none"; 
+    ctx.restore();
 }
 
 /**
- * Draws a custom background image on the canvas.
- * No zoom logic is applied.
+ * Draws a custom background image on the canvas with optional zoom functionality.
  * @param ctx The canvas rendering context.
  * @param canvas The canvas configuration object.
+ * @param zoom Optional zoom configuration.
  */
-export async function customBackground(ctx: SKRSContext2D, canvas: CanvasConfig): Promise<void> {
+export async function customBackground(
+    ctx: SKRSContext2D,
+    canvas: CanvasConfig,
+    zoom?: ZoomConfig,
+    blur?: number
+): Promise<void> {
     if (canvas.customBg) {
-      try {
-        let imageBuffer: string;
-  
-        if (canvas.customBg.startsWith('http')) {
-          imageBuffer = canvas.customBg;
-        } else {
-          imageBuffer = path.join(process.cwd(), canvas.customBg);
+        try {
+            let imageBuffer: string;
+
+            if (canvas.customBg.startsWith("http")) {
+                imageBuffer = canvas.customBg;
+            } else {
+                imageBuffer = path.join(process.cwd(), canvas.customBg);
+            }
+
+            const image = await loadImage(imageBuffer);
+            const imgWidth = image.width;
+            const imgHeight = image.height;
+            const canvasWidth = canvas.width || imgWidth;
+            const canvasHeight = canvas.height || imgHeight;
+
+            if (blur) {
+              ctx.filter = `blur(${blur}px)`;
+            }
+
+            if (zoom) {
+                const scale = Math.max(1, zoom.scale || 1);
+                const cropWidth = imgWidth / scale;
+                const cropHeight = imgHeight / scale;
+
+                let sx = (zoom.x || 0) - cropWidth / 2;
+                let sy = (zoom.y || 0) - cropHeight / 2;
+
+                sx = Math.max(0, Math.min(sx, imgWidth - cropWidth));
+                sy = Math.max(0, Math.min(sy, imgHeight - cropHeight));
+
+                ctx.drawImage(image, sx, sy, cropWidth, cropHeight, 0, 0, canvasWidth, canvasHeight);
+            } else {
+                ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+            }
+            ctx.filter = "none";
+        } catch (error: any) {
+            console.error("Error loading custom background image:", error.message);
         }
+    }
+}
+
+export function backgroundRadius(
+    ctx: SKRSContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    borderRadius: number | "circular",
+    borderPosition: string = "all"
+  ): void {
+    ctx.beginPath();
   
-        const image = await loadImage(imageBuffer);
+    if (borderRadius === "circular") {
+      const circleRadius = Math.min(width, height) / 2;
+      ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
+    } else if (typeof borderRadius === "number" && borderRadius > 0) {
+      const br: number = Math.min(borderRadius, width / 2, height / 2);
+      const selectedPositions = new Set(borderPosition.toLowerCase().split(",").map((s) => s.trim()));
   
-        // Use canvas dimensions without additional x/y translation,
-        // because createCanvas already translated the context.
-        const canvasWidth = canvas.width || image.width;
-        const canvasHeight = canvas.height || image.height;
+      const roundTopLeft = selectedPositions.has("all") || selectedPositions.has("top-left") || (selectedPositions.has("top") && selectedPositions.has("left"));
+      const roundTopRight = selectedPositions.has("all") || selectedPositions.has("top-right") || (selectedPositions.has("top") && selectedPositions.has("right"));
+      const roundBottomRight = selectedPositions.has("all") || selectedPositions.has("bottom-right") || (selectedPositions.has("bottom") && selectedPositions.has("right"));
+      const roundBottomLeft = selectedPositions.has("all") || selectedPositions.has("bottom-left") || (selectedPositions.has("bottom") && selectedPositions.has("left"));
   
-        // Draw the image so that it fills the canvas area relative to (0,0)
-        ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+      const tl = roundTopLeft ? br : 0;
+      const tr = roundTopRight ? br : 0;
+      const brR = roundBottomRight ? br : 0;
+      const bl = roundBottomLeft ? br : 0;
   
-      } catch (error: any) {
-        console.error('Error loading custom background image:', error.message);
-      }
+      ctx.moveTo(x + tl, y);
+      ctx.lineTo(x + width - tr, y);
+      if (tr > 0) ctx.arc(x + width - tr, y + tr, tr, -Math.PI / 2, 0, false);
+      ctx.lineTo(x + width, y + height - brR);
+      if (brR > 0) ctx.arc(x + width - brR, y + height - brR, brR, 0, Math.PI / 2, false);
+      ctx.lineTo(x + bl, y + height);
+      if (bl > 0) ctx.arc(x + bl, y + height - bl, bl, Math.PI / 2, Math.PI, false);
+      ctx.lineTo(x, y + tl);
+      if (tl > 0) ctx.arc(x + tl, y + tl, tl, Math.PI, -Math.PI / 2, false);
+    } else {
+      ctx.rect(x, y, width, height);
     }
-}  
+  
+    ctx.closePath();
+    ctx.clip();
+  }
+