Package Exports

apexify.js

Readme

🎨 ApexPainter - Advanced Canvas Rendering Library

The Ultimate TypeScript Canvas Library for Node.js

Create stunning visuals with professional-grade canvas rendering, image processing, and text effects

✨ Features Overview

🖼️ Advanced Image Processing

Professional Filters: 22+ filters including blur, sharpen, vintage, cinematic effects
Shape Drawing: 8+ shapes (rectangle, circle, heart, star, polygon, etc.)
Gradient Support: Linear and radial gradients for fills and strokes
Shadow & Stroke Effects: Customizable shadows and strokes for all shapes
Rotation & Positioning: Full control over image placement and rotation

🎨 Rich Background System

Multiple Background Types: Solid colors, gradients, custom images
Pattern Overlays: 12+ built-in patterns (grid, dots, stripes, hexagons, etc.)
Custom Patterns: Use your own images as repeating patterns
Blend Modes: 11+ blend modes for professional compositing
Noise Effects: Add texture with customizable noise intensity

📝 Enhanced Text Rendering

Font Management: Custom fonts, sizes, families, and styles
Text Decorations: Bold, italic, underline, overline, strikethrough, highlight
Advanced Effects: Glow, shadow, stroke with gradient support
Spacing Control: Letter spacing, word spacing, line height
Text Wrapping: Automatic text wrapping with size constraints
Rotation: Full 360° text rotation support

🔧 Professional Tools

Chart Generation: Bar charts, pie charts, line charts
GIF Creation: Animated GIFs from image sequences
Format Conversion: Convert between PNG, JPEG, WebP, and more
Image Manipulation: Crop, resize, background removal
Color Detection: Extract and analyze colors from images

🚀 Quick Start

Installation

npm install apexify

Basic Usage

import { ApexPainter } from 'apexify';

const painter = new ApexPainter();

// Create a canvas with gradient background
const canvas = await painter.createCanvas({
  width: 800,
  height: 600,
  gradientBg: {
    type: 'linear',
    colors: [
      { color: '#FF6B6B', position: 0 },
      { color: '#4ECDC4', position: 0.5 },
      { color: '#45B7D1', position: 1 }
    ],
    direction: { x1: 0, y1: 0, x2: 800, y2: 600 }
  },
  shadow: {
    color: '#000',
    offsetX: 10,
    offsetY: 10,
    blur: 20
  },
  borderRadius: 20
});

// Add a beautiful heart shape
const heartImage = await painter.createImage({
  source: 'heart',
  x: 300,
  y: 200,
  width: 200,
  height: 200,
  fill: true,
  gradient: {
    type: 'radial',
    colors: [
      { color: '#FF6B6B', position: 0 },
      { color: '#FF1744', position: 1 }
    ],
    center: { x: 100, y: 100 },
    radius: 100
  },
  shadow: {
    color: '#000',
    offsetX: 15,
    offsetY: 15,
    blur: 25
  },
  stroke: {
    color: '#FFF',
    width: 5
  }
});

// Add stunning text
const textImage = await painter.createText({
  text: 'ApexPainter',
  x: 400,
  y: 450,
  fontSize: 48,
  fontFamily: 'Arial',
  bold: true,
  gradient: {
    type: 'linear',
    colors: [
      { color: '#FFD700', position: 0 },
      { color: '#FF6B6B', position: 1 }
    ],
    direction: { x1: 0, y1: 0, x2: 300, y2: 0 }
  },
  glow: {
    color: '#FFD700',
    intensity: 0.8,
    opacity: 0.9
  },
  shadow: {
    color: '#000',
    offsetX: 8,
    offsetY: 8,
    blur: 15
  },
  stroke: {
    color: '#FFF',
    width: 3
  }
}, heartImage);

// Save the result
fs.writeFileSync('beautiful-artwork.png', textImage);

🎯 Real-World Examples

🏢 Business Cards & Marketing Materials

// Create a professional business card
const businessCard = await painter.createCanvas({
  width: 400,
  height: 250,
  gradientBg: {
    type: 'linear',
    colors: [
      { color: '#2C3E50', position: 0 },
      { color: '#34495E', position: 1 }
    ],
    direction: { x1: 0, y1: 0, x2: 400, y2: 250 }
  },
  patternBg: {
    type: 'dots',
    color: '#FFF',
    opacity: 0.1,
    size: 5,
    spacing: 20
  }
});

// Add company logo (star shape)
const logo = await painter.createImage({
  source: 'star',
  x: 50,
  y: 50,
  width: 60,
  height: 60,
  fill: true,
  color: '#FFD700',
  shadow: { color: '#000', offsetX: 3, offsetY: 3, blur: 8 }
}, businessCard.buffer);

// Add company name
const companyText = await painter.createText({
  text: 'ACME Corp',
  x: 130,
  y: 80,
  fontSize: 24,
  fontFamily: 'Arial',
  bold: true,
  color: '#FFF',
  shadow: { color: '#000', offsetX: 2, offsetY: 2, blur: 4 }
}, logo);

// Add contact info
const contactText = await painter.createText({
  text: 'john@acme.com\n+1 (555) 123-4567',
  x: 50,
  y: 150,
  fontSize: 14,
  fontFamily: 'Arial',
  color: '#BDC3C7',
  lineHeight: 1.5
}, companyText);

🎮 Game UI Elements

// Create a game button
const gameButton = await painter.createCanvas({
  width: 200,
  height: 60,
  gradientBg: {
    type: 'linear',
    colors: [
      { color: '#FF6B6B', position: 0 },
      { color: '#FF1744', position: 1 }
    ],
    direction: { x1: 0, y1: 0, x2: 200, y2: 60 }
  },
  shadow: {
    color: '#000',
    offsetX: 5,
    offsetY: 5,
    blur: 15
  },
  borderRadius: 30
});

// Add button text with glow effect
const buttonText = await painter.createText({
  text: 'PLAY NOW',
  x: 100,
  y: 35,
  fontSize: 20,
  fontFamily: 'Arial',
  bold: true,
  color: '#FFF',
  textAlign: 'center',
  textBaseline: 'middle',
  glow: {
    color: '#FFD700',
    intensity: 0.6,
    opacity: 0.8
  },
  shadow: {
    color: '#000',
    offsetX: 2,
    offsetY: 2,
    blur: 4
  }
}, gameButton.buffer);

📚 API Reference

Core Methods

Method	Description	Parameters
`createCanvas()`	Create a new canvas with background	`CanvasConfig`
`createImage()`	Add shapes/images to canvas	`ImageProperties`
`createText()`	Add text to canvas	`TextProperties`
`createChart()`	Generate charts	`ChartConfig`
`createGIF()`	Create animated GIFs	`GIFConfig`

Shape Types

rectangle - Standard rectangle
square - Perfect square
circle - Perfect circle
triangle - Equilateral triangle
trapezium - Trapezoid shape
star - 5-pointed star
heart - Heart shape with bezier curves
polygon - Custom polygon

Pattern Types

grid - Grid pattern
dots - Dot pattern
diagonal - Diagonal lines
stripes - Horizontal/vertical stripes
waves - Wave pattern
crosses - Cross pattern
hexagons - Hexagonal pattern
checkerboard - Checkerboard pattern
diamonds - Diamond pattern
triangles - Triangle pattern
stars - Star pattern
polka - Polka dot pattern
custom - Custom image pattern

🤝 Contributing

We welcome contributions! Here's how you can help:

Report Bugs: Found a bug? Open an issue with detailed information
Feature Requests: Have an idea? We'd love to hear it!
Code Contributions: Submit pull requests for improvements
Documentation: Help improve our docs and examples

Development Setup

# Clone the repository
git clone https://github.com/your-username/apexify.git

# Install dependencies
npm install

# Run tests
npm test

# Build the project
npm run build

📞 Support & Community

Join Our Discord Community

Documentation & Resources

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

@napi-rs/canvas - High-performance canvas rendering
Sharp - Professional image processing
Jimp - JavaScript image manipulation
TypeScript - Type-safe development

Made with ❤️ by Jedi Studio

Create stunning visuals with ApexPainter - The ultimate canvas library for Node.js

apexify.js