FxCanvas Documentation

Appearance

Working with Colors ​

FxCanvas provides a comprehensive Color class for representing and manipulating colors in your drawings. The Color class supports various color spaces and creation methods, making it easy to work with colors programmatically.

Creating Colors ​

RGB Colors ​

Create colors using red, green, blue, and optional alpha values:

javascript
import { Color } from 'fxcanvas';

// Opaque colors
const red = new Color(255, 0, 0);
const green = new Color(0, 255, 0);
const blue = new Color(0, 0, 255);

// Colors with alpha transparency
const semiTransparent = new Color(255, 0, 0, 0.5);

Manual Hex Color Conversion ​

When working with hex color values, you can manually convert them to FxCanvas Color instances by decomposing the hex string into RGB components.

For RGB colors like '#FF0330':

  • Remove the '#' prefix: 'FF0330'
  • Split into pairs: 'FF' '03' '30'
  • Prepend '0x' to create hex numbers: 0xFF, 0x03, 0x30
  • Use in the Color constructor: new Color(0xFF, 0x03, 0x30)

For colors with alpha like '#FF033055':

  • Split into four pairs: 'FF' '03' '30' '55'
  • Convert RGB as above: 0xFF, 0x03, 0x30
  • Convert alpha to [0,1] range: 0x55 / 0xFF (approximately 0.333)
  • Use in constructor: new Color(0xFF, 0x03, 0x30, 0x55 / 0xFF)
javascript
// Example conversions
const coral = new Color(0xFF, 0x7F, 0x50);        // '#FF7F50'
const semiTransparentRed = new Color(0xFF, 0x00, 0x00, 0x80 / 0xFF); // '#FF000080'

Named Colors ​

Use predefined color names:

javascript
const red = Color.fromName('red');
const blue = Color.fromName('blue');
const white = Color.fromName('white');

HSV Colors ​

Create colors using Hue, Saturation, Value color space:

javascript
// Pure red (hue 0°)
const red = Color.fromHSV(0, 1, 1);

// Bright green (hue 120°)
const green = Color.fromHSV(120, 1, 1);

// Blue with alpha
const blue = Color.fromHSV(240, 1, 1, 0.8);

Hue ranges from 0-360°, saturation and value from 0-1.

Using Colors ​

Colors can be used anywhere a color is expected in FxCanvas:

javascript
import { CanvasEncoder } from 'fxcanvas';

const canvas = new CanvasEncoder(400, 200);

// Fill and stroke styles
canvas.setFillStyle(new Color(255, 0, 0));      // Red fill
canvas.setStrokeStyle(new Color(0, 255, 0));    // Green stroke

// Shadow color
canvas.setShadowColor(new Color(0, 0, 0, 0.5)); // Semi-transparent black

// Draw shapes
canvas.fillRect(50, 50, 100, 100);
canvas.strokeRect(200, 50, 100, 100);

Colors can define stroke appearance; see Working with Strokes.

Colors influence pattern and image visuals; explore in Working with Patterns and Working with Images.

Color Properties ​

Each Color object has RGBA components:

javascript
const color = new Color(255, 100, 50, 0.8);

console.log(color.r); // 255 (red)
console.log(color.g); // 100 (green)
console.log(color.b); // 50 (blue)
console.log(color.a); // 0.8 (alpha)

Converting Colors ​

To Hex String ​

Convert colors to hexadecimal representation:

javascript
const color = new Color(255, 0, 128);
console.log(color.toHex()); // "#FF0080"

Note: toHexRgb() and toHexRgba() methods are not available; use toHex() for standard hex strings.

Colors power gradient transitions; see Working with Gradients for examples.

Color Utilities ​

Color Encoding ​

Colors are automatically encoded for the binary format:

javascript
const color = new Color(255, 0, 0);
const encoded = color.encode(); // [255, 0, 0, 255] (RGBA as bytes)

Best Practices ​

  • Use the Color class consistently instead of raw color values
  • Cache frequently used colors to avoid recreation
  • Use alpha values for transparency effects
  • Consider color space (RGB vs HSV) based on your use case

The Color class provides a robust foundation for all color operations in FxCanvas, ensuring consistent color handling across your applications.