FxCanvas Documentation

Appearance

Text-to-Image Generation ​

FxCanvas includes AI-powered text-to-image generation through the Txt2ImgContext extension. This allows you to create images from text descriptions using advanced AI models, with support for seed control and image-based conditioning.

Basic Text-to-Image ​

Generate an image from a text prompt:

javascript
import { CanvasEncoder } from 'fxcanvas';

const canvas = new CanvasEncoder(512, 512);

// Generate image from text prompt
canvas.txt2img.drawImage(0, 0, 512, 512, 'A beautiful sunset over mountains');

Parameters ​

Position and Size ​

javascript
// Draw AI-generated image at position with dimensions
canvas.txt2img.drawImage(x, y, width, height, prompt);
  • x, y: Top-left position for the generated image
  • width, height: Dimensions of the generated image
  • prompt: Text description of the desired image

Seed Control ​

Control generation randomness for reproducible results:

javascript
// Set a specific seed for deterministic generation
canvas.txt2img.setSeed(42);

// Generate the same image multiple times
canvas.txt2img.drawImage(0, 0, 256, 256, 'A red rose');
canvas.txt2img.drawImage(256, 0, 256, 256, 'A red rose'); // Same result

// Use random seed (default behavior)
canvas.txt2img.setSeed(0);
canvas.txt2img.drawImage(0, 256, 256, 256, 'A red rose'); // Different result

Image-Based Conditioning ​

Use existing images as starting points or references:

javascript
// Load a reference image
const referenceImg = new Image('/path/to/reference.jpg');

// Set as seed image
canvas.txt2img.setReferenceImages([referenceImg]);

// Generate variations based on the reference
canvas.txt2img.drawImage(0, 0, 512, 512, 'A painting in the style of impressionism');

Advanced Techniques ​

Multiple Generations ​

Create compositions with multiple AI-generated elements:

javascript
// Background scene
canvas.txt2img.drawImage(0, 0, 512, 512, 'A mystical forest with glowing mushrooms');

// Overlay character
canvas.txt2img.setSeed(123);
canvas.txt2img.drawImage(150, 150, 200, 300, 'A wise old wizard with flowing beard, detailed robes');

Style Transfer ​

Use seed images for style transfer effects:

javascript
// Load style reference (e.g., Van Gogh painting)
const styleImg = new Image('/vangogh-painting.jpg');

canvas.txt2img.setReferenceImages([styleImg]);
canvas.txt2img.drawImage(0, 0, 512, 512, 'A cityscape in the style of the seed image');

Iterative Refinement ​

Use generated images as seeds for further refinement:

javascript
// First generation
canvas.txt2img.setSeed(42);
canvas.txt2img.drawImage(0, 0, 512, 512, 'A dragon');

// Use the result as seed for refinement
// (In practice, you'd need to render and reload the image)
const refinedImg = new Image(/* rendered result */);
canvas.txt2img.setReferenceImages([refinedImg]);
canvas.txt2img.drawImage(0, 0, 512, 512, 'Add more scales and make the eyes glow');

Canvas as Reference ​

Use the current canvas content as a reference for image generation:

javascript
import { DrawImageFlags } from 'fxcanvas';

// Use current canvas as reference
canvas.txt2img.drawImage(0, 0, 512, 512, 'A landscape painting', DrawImageFlags.REFERENCE_CANVAS);

// Remove background from reference
canvas.txt2img.drawImage(0, 0, 512, 512, 'A portrait', DrawImageFlags.REMOVE_BG);

// Combine flags
canvas.txt2img.drawImage(0, 0, 512, 512, 'An abstract painting', DrawImageFlags.REFERENCE_CANVAS | DrawImageFlags.REMOVE_BG);

Remove Background ​

Remove backgrounds from generated images:

javascript
// Generate image with background
canvas.txt2img.drawImage(0, 0, 512, 512, 'A vase of flowers on a table');

// Remove background from generated image
canvas.txt2img.drawImage(0, 0, 512, 512, 'A vase of flowers on a table', DrawImageFlags.REMOVE_BG);

SimpleHuman Extension ​

The SimpleHuman extension generates customizable simple human figures with detailed control over appearance and pose.

INFO

All human images generated by SimpleHuman have transparent backgrounds.

Basic Usage ​

javascript
import { SimpleHuman } from 'fxcanvas';

// Generate a simple human figure
const params = {
    pose: SimpleHuman.Pose.Neutral,
    wear: SimpleHuman.Wear.TShirt,
    gender: SimpleHuman.Gender.Female,
    age: SimpleHuman.Age.Adult
};

canvas.txt2img.drawSimpleHuman(0, 0, 256, 256, params);

Parameter Reference ​

  • camera: Controls camera distance/angle (Any/Near/Far) - Custom prompt available
  • pose: Human pose (Any/Neutral/ThumbsUp/CrossedArms/etc.) - Custom prompt available
  • emote: Facial expression (Any/Normal/Smiling/Pouting/etc.) - Custom prompt available
  • ethnicity: Ethnic appearance (Any/Asian/Black/White/etc.) - Custom prompt available
  • wear: Clothing type (Any/TShirt/Dress/Coat/etc.) - Custom prompt available
  • wearColor: Clothing color - No custom prompt (uses Color object)
  • hairStyle: Hair style (Any/LongHair/ShortHair/Bun/etc.) - Custom prompt available
  • hairColor: Hair color - No custom prompt (uses Color object)
  • bodyShape: Body type (Any/Standard/Skinny/Muscular/etc.) - Custom prompt available
  • face: Facial features (Any/Clear/Glasses/Beard/etc.) - Custom prompt available
  • gender: Gender (Any/Male/Female) - Custom prompt available
  • age: Age group (Any/YoungAdult/Adult/MiddleAged/etc.) - Custom prompt available
  • lookAt: Gaze direction (Any/Up/Left/Front/etc.) - Custom prompt available

Custom Prompts ​

Override default parameters with custom text prompts:

javascript
const customPrompts = {
    pose: 'standing with hands in pockets',
    wear: 'blue jeans and a white shirt',
    hairStyle: 'long wavy hair'
};

canvas.txt2img.drawSimpleHuman(0, 0, 256, 256, params, customPrompts);

The text-to-image extension brings AI-powered creativity to your FxCanvas applications, enabling dynamic and personalized visual content.