šØ Advanced Canvas Rendering Library - Professional image processing, shape drawing, text effects, patterns, filters, and charts. Built with TypeScript & Rust for high performance.
npm install apexify.jsš One Library. Infinite Possibilities. Professional Results.





The most powerful, all-in-one canvas rendering and image processing library for Node.js
š Now Even More Advanced: Full Canvas API Compatibility + Advanced Extensions
---
While other libraries force you to install multiple packages for different tasks, Apexify.js gives you everything in one place:
| Feature | Apexify.js | Other Libraries |
|---------|-----------|-----------------|
| Canvas Rendering | ā
Built-in | ā Separate library needed |
| Image Processing | ā
Built-in | ā Requires Sharp/Jimp |
| Video Processing | ā
Built-in (33+ features) | ā Requires FFmpeg wrapper |
| Chart Generation | ā
Built-in (6 chart types) | ā Requires Chart.js/Recharts |
| GIF Creation | ā
Built-in | ā Separate library needed |
| Text Rendering | ā
Advanced (gradients, paths, effects) | ā Basic only |
| Shape Drawing | ā
Complex shapes (heart, star, custom) | ā Basic shapes only |
| Batch Processing | ā
Built-in | ā Manual implementation |
| Text Metrics API | ā
Advanced (Canvas API + extensions) | ā Not available |
| Pixel Data API | ā
Advanced (get/set/manipulate) | ā Not available |
| Path2D API | ā
Advanced (full Canvas compatibility) | ā ļø Basic only |
| Hit Detection | ā
Advanced (multi-region, custom) | ā Not available |
| TypeScript Support | ā
Full type safety | ā ļø Partial or none |
| Performance | ā
Rust-powered (@napi-rs) | ā ļø JavaScript-only |
ā
Zero Configuration - Works out of the box, no complex setup
ā
TypeScript First - Complete type definitions for everything
ā
Rust-Powered Performance - Built on @napi-rs/canvas for blazing speed
ā
Modular Architecture - Clean, maintainable codebase
ā
Comprehensive Features - 200+ methods covering every use case
ā
Canvas API Compatible - Full Canvas API support with advanced extensions
ā
Advanced APIs - Text Metrics, Pixel Data, Path2D, Hit Detection
ā
Active Development - Regular updates with new features
ā
Production Ready - Used in production by thousands of projects
---
- š Next.js Applications - Server-side image generation, API routes, ISR
- š¤ Discord Bots - Welcome cards, level-up graphics, profile images
- š E-commerce - Product image generation, banners, marketing materials
- š± Social Media - Profile pictures, cover images, post graphics
- š® Gaming - Game assets, UI elements, character cards
- š¼ Business - Business cards, certificates, professional documents
- šØ Design Tools - Build Photoshop-like applications
- š Data Visualization - Charts, graphs, infographics
- š¬ Video Editing - Thumbnails, previews, effects, transitions
- š Automation - Batch processing, thumbnail generation, asset creation
---
| Feature | Description |
|---------|-------------|
| Solid Colors | Custom background colors with opacity control |
| Gradients | Linear, radial, and conic gradients with custom stops |
| Image Backgrounds | Custom images with filters, opacity, and positioning |
| Video Backgrounds | Extract frames from videos as backgrounds |
| Patterns | Professional pattern overlays (dots, lines, grids, custom) |
| Noise Effects | Add texture and grain to backgrounds |
| Zoom Effects | Apply zoom transformations to backgrounds |
| Feature | Description |
|---------|-------------|
| Image Drawing | Draw images with positioning, scaling, rotation |
| Image Filters | Blur, sharpen, brightness, contrast, saturation |
| Color Filters | Grayscale, sepia, invert, custom color adjustments |
| Professional Filters | Vintage, cinematic, black & white, custom presets |
| Image Effects | Vignette, lens flare, chromatic aberration, film grain |
| Image Masking | Alpha, luminance, and inverse masking modes |
| Image Distortion | Perspective, bulge/pinch, mesh warping |
| Image Cropping | Inner and outer cropping with precise control |
| Image Resizing | Smart resizing with aspect ratio preservation |
| Background Removal | AI-powered background removal |
| Color Detection | Extract dominant colors from images |
| Color Removal | Remove specific colors from images |
| Image Rotation | Rotate images with custom angles |
| Image Blending | 15+ blend modes (multiply, screen, overlay, etc.) |
| Image Stitching | Stitch multiple images together (horizontal, vertical, grid) |
| Image Collage | Create collages with grid, masonry, carousel layouts |
| Image Compression | Compress images (JPEG, WebP, AVIF) with quality control |
| Color Palette Extraction | Extract color palettes using k-means, median-cut, octree |
| Feature | Description |
|---------|-------------|
| Basic Text | Simple text rendering with fonts and colors |
| Enhanced Text | Advanced text with shadows, strokes, glows |
| Text Gradients | Gradient text fills (linear, radial, conic) |
| Text on Paths | Render text along curves, arcs, and bezier paths |
| Custom Fonts | Load custom fonts (.ttf, .otf, .woff) |
| Text Decorations | Bold, italic, underline, strikethrough |
| Text Effects | Shadows, strokes, glows, outlines |
| Text Alignment | Left, center, right, justify alignment |
| Text Wrapping | Automatic text wrapping with custom widths |
| Text Rotation | Rotate text at any angle |
| Text Spacing | Letter spacing and line height control |
| Text Metrics API | Advanced text measurement (Canvas API + extensions) |
| Character Metrics | Per-character width and position metrics |
| Multi-line Metrics | Line-by-line text metrics for wrapped text |
| Feature | Description |
|---------|-------------|
| Basic Shapes | Rectangle, circle, ellipse, line, polygon |
| Complex Shapes | Heart, star, custom path shapes |
| Shape Fills | Solid colors, gradients, patterns, images |
| Shape Strokes | Custom stroke width, color, style (solid, dashed, dotted) |
| Shape Shadows | Drop shadows with blur, offset, color |
| Shape Rotation | Rotate shapes with custom angles |
| Shape Scaling | Scale shapes with custom factors |
| Advanced Strokes | Groove, ridge, double, inset, outset styles |
| Arc & PieSlice | Draw arcs and pie slice sectors with custom angles |
| Path2D API | Advanced path creation and manipulation |
| Hit Detection | Point-in-shape detection with custom regions |
| Feature | Description |
|---------|-------------|
| Pie Charts | Standard and donut pie charts with gradients |
| Bar Charts | Standard, grouped, stacked, waterfall, lollipop charts |
| Horizontal Bar Charts | All bar chart types in horizontal orientation |
| Line Charts | Multi-series line charts with gradients |
| Comparison Charts | Side-by-side comparison of any two chart types |
| Chart Customization | Gradients, custom fonts, legends, labels, titles |
| Data Visualization | Professional charts for data presentation |
| Feature | Description |
|---------|-------------|
| Video Info | Extract video metadata (duration, resolution, FPS, bitrate) |
| Frame Extraction | Extract single or multiple frames at specific times |
| Video Thumbnails | Generate thumbnail grids from videos |
| Video Conversion | Convert between formats (MP4, WebM, AVI, MOV, MKV) |
| Video Trimming | Trim videos to specific time ranges |
| Audio Extraction | Extract audio tracks from videos |
| Video Watermarking | Add image or text watermarks to videos |
| Speed Control | Change video playback speed (slow motion, time-lapse) |
| Video Effects | Apply filters (blur, brightness, contrast, saturation) |
| Video Merging | Merge multiple videos (sequential, side-by-side, grid) |
| Segment Replacement | Replace video segments with other videos or frames |
| Video Rotation | Rotate videos (90°, 180°, 270°) |
| Video Cropping | Crop videos to specific regions |
| Video Compression | Compress videos with quality presets |
| Text Overlays | Add text/subtitles to videos with positioning |
| Fade Effects | Add fade in/out transitions |
| Reverse Playback | Reverse video and audio |
| Video Loops | Create seamless video loops |
| Batch Processing | Process multiple videos in parallel |
| Scene Detection | Detect scene changes in videos |
| Video Stabilization | Reduce camera shake and stabilize footage |
| Color Correction | Professional color grading (brightness, contrast, saturation, hue) |
| Picture-in-Picture | Add overlay videos with positioning |
| Split Screen | Create multi-video layouts (side-by-side, grid) |
| Time-lapse Creation | Speed up videos to create time-lapses |
| Audio Control | Mute, adjust volume, normalize audio levels |
| Format Detection | Analyze video properties and formats |
| Freeze Frame | Hold a frame for dramatic effect |
| Export Presets | Platform-optimized presets (YouTube, Instagram, TikTok, etc.) |
| Progress Tracking | Real-time progress callbacks for all operations |
| Audio Normalization | Professional audio leveling (LUFS, Peak, RMS) |
| LUT Support | Apply Look-Up Tables for cinematic color grading |
| Video Transitions | 9 transition types (fade, wipe, slide, zoom, rotate, etc.) |
| Animated Text | 8 animation types (fadeIn, slideIn, zoom, bounce, typewriter, etc.) |
| Frame-to-Video | Compile edited frames/images into videos |
| Feature | Description |
|---------|-------------|
| GIF Generation | Create animated GIFs from image sequences |
| Frame Management | Add frames with custom durations |
| GIF Watermarking | Add watermarks to GIFs |
| Text Overlays | Add text to GIF frames |
| Output Formats | File, buffer, base64, attachment output |
| Quality Control | Adjust GIF quality and optimization |
| Feature | Description |
|---------|-------------|
| Text Metrics API | Complete text measurement matching Canvas API + extensions |
| Pixel Data API | Direct pixel manipulation (get/set/manipulate pixels) |
| Pixel Filters | Built-in filters (grayscale, invert, sepia, brightness, contrast) |
| Custom Pixel Processors | Custom functions for pixel-level processing |
| Path2D API | Advanced path creation with commands (moveTo, lineTo, arc, bezier, etc.) |
| Path Drawing | Draw paths with stroke, fill, and transform options |
| Hit Detection | Point-in-path and point-in-region detection |
| Custom Regions | Rectangle, circle, ellipse, polygon, path, and custom function regions |
| Multi-Region Detection | Test points against multiple regions simultaneously |
| Distance Calculation | Calculate distances from points to region edges |
| Feature | Description |
|---------|-------------|
| Batch Operations | Process multiple operations in parallel |
| Chain Operations | Chain operations sequentially |
| Format Conversion | Convert between PNG, JPEG, WebP, AVIF, SVG |
| Smart Saving | Save with timestamps, counters, custom naming |
| Multiple Formats | Export to PNG, JPEG, WebP, AVIF, GIF |
| Custom Lines | Advanced line drawing with arrows, markers, patterns |
| Smooth Paths | Create smooth curves with tension control |
| Catmull-Rom Splines | Professional curve interpolation |
---
``bash`
npm install apexify.js
`typescript
import { ApexPainter } from 'apexify.js';
const painter = new ApexPainter();
// Create a canvas
const canvas = await painter.createCanvas({
width: 1200,
height: 630,
gradientBg: {
type: 'linear',
colors: [
{ stop: 0, color: '#667EEA' },
{ stop: 1, color: '#764BA2' }
]
}
});
// Add text
const text = await painter.createText({
text: 'Hello, World!',
x: 600,
y: 315,
fontSize: 48,
color: '#FFFFFF',
fontFamily: 'Arial'
}, canvas);
// Add image
const image = await painter.createImage({
source: 'path/to/image.png',
x: 100,
y: 100,
width: 200,
height: 200
}, canvas);
// Advanced: Text Metrics API
const metrics = await painter.measureText({
text: 'Hello, World!',
fontSize: 48,
fontFamily: 'Arial',
includeCharMetrics: true
});
console.log(Text width: ${metrics.width}px);
// Advanced: Pixel Data API
const pixelData = await painter.getPixelData(image.buffer, {
x: 0, y: 0, width: 100, height: 100
});
const processed = await painter.manipulatePixels(image.buffer, {
filter: 'grayscale',
intensity: 1.0
});
// Advanced: Path2D API
const path = painter.createPath2D([
{ type: 'moveTo', x: 0, y: 0 },
{ type: 'lineTo', x: 100, y: 100 },
{ type: 'arc', x: 150, y: 150, radius: 50, startAngle: 0, endAngle: Math.PI }
]);
await painter.drawPath(canvas.buffer, path, {
stroke: { color: '#ff0000', width: 2 },
fill: { color: '#00ff00', opacity: 0.5 }
});
// Advanced: Hit Detection API
const hitResult = await painter.isPointInRegion({
type: 'circle',
x: 100, y: 100, radius: 50
}, 120, 120);
console.log(Point hit: ${hitResult.hit});`
// Save result
await painter.save(image, {
path: './output.png',
format: 'png'
});
---
`bash``
npm install apexify.jsor
yarn add apexify.jsor
pnpm add apexify.js
Requirements:
- Node.js 16+
- TypeScript 5+ (optional but recommended)
---
---
- Rust-Powered: Built on @napi-rs/canvas for native performance
- Optimized Algorithms: Efficient image processing and rendering
- Batch Processing: Process multiple operations in parallel
- Memory Efficient: Smart resource management and cleanup
- Canvas API Native: Direct access to Canvas APIs for maximum performance
---
- Full Documentation: https://apexifyjs.vercel.app
- GitHub Repository: https://github.com/EIAS79/Apexify.js
- Changelog: See CHANGELOG.md for version history
---
Contributions are welcome! Please feel free to submit a Pull Request.
---
MIT License - see LICENSE file for details.
---
If you find Apexify.js useful, please consider giving it a star on GitHub!
---
Made with ā¤ļø by the Apexify.js community
Documentation ⢠GitHub ⢠npm ⢠Report Bug