FxCanvas Documentation

Appearance

Text Rendering ​

Text is a crucial part of most FxCanvas applications, used for labels, buttons, interfaces, and visual communication. FxCanvas provides comprehensive text rendering capabilities with precise control over positioning, styling, and effects.

WARNING

Only basic text rendering is currently supported, with text alignment and baseline but no control over letter spacing, word spacing, line height, text wrapping, kerning, ligatures, RTL, or more advanced typesetting.

For font loading and management details, see Font Management.

Drawing Filled Text ​

Filled text creates solid, readable text perfect for most UI elements and labels.

The fillText(text, x, y) method draws text at the specified position, filled with the current fill style.

javascript
// Set font and fill color
const font = new Font(20, calSans, { weight: 400 });
canvas.setFont(font);
canvas.setFillStyle(new Color(0, 0, 0)); // black

// Draw filled text
canvas.fillText('Hello World', 50, 100);

The text appears filled with the current fillStyle, which can be a color, gradient, or pattern.

Drawing Stroked Text ​

Stroked text creates outlined text, useful for decorative effects or when you want text to stand out against complex backgrounds.

The strokeText(text, x, y, maxWidth?) method draws the text outline using the current stroke settings.

javascript
// Configure stroke
const boldFont = new Font(36, calSans, { weight: 700 });
canvas.setFont(boldFont);
canvas.setStrokeStyle(new Color(0, 0, 255)); // blue
canvas.setLineWidth(2);

// Draw stroked text
canvas.strokeText('Outlined Text', 50, 100);

The text outline follows the stroke style, creating bold, decorative lettering.

Text Alignment and Baseline ​

FxCanvas provides methods to control how text is positioned relative to its coordinates.

Text Alignment ​

The setTextAlign() method controls horizontal positioning:

javascript
import { TextAlign } from 'fxcanvas';

const font = new Font(16, calSans);
canvas.setFont(font);

// Left-aligned (default)
canvas.setTextAlign(TextAlign.Left);
canvas.fillText('Left', 100, 50);

// Center-aligned
canvas.setTextAlign(TextAlign.Center);
canvas.fillText('Center', 100, 100);

// Right-aligned
canvas.setTextAlign(TextAlign.Right);
canvas.fillText('Right', 100, 150);

Text Baseline ​

The setTextBaseline() method controls vertical positioning:

javascript
import { TextBaseline } from 'fxcanvas';

canvas.setFont(font);
canvas.setTextAlign(TextAlign.Center);

// Top of text at y coordinate
canvas.setTextBaseline(TextBaseline.Top);
canvas.fillText('Top', 100, 50);

// Middle of text at y coordinate
canvas.setTextBaseline(TextBaseline.Middle);
canvas.fillText('Middle', 100, 100);

// Bottom of text at y coordinate (default)
canvas.setTextBaseline(TextBaseline.Bottom);
canvas.fillText('Bottom', 100, 150);

Advanced Text Techniques ​

Multi-line Text ​

javascript
function drawMultilineText(canvas, text, x, y, lineHeight) {
    const lines = text.split('\n');
    lines.forEach((line, index) => {
        canvas.fillText(line, x, y + (index * lineHeight));
    });
}

const font = new Font(16, calSans);
canvas.setFont(font);
drawMultilineText(canvas, 'Line 1\nLine 2\nLine 3', 50, 50, 20);

Text with Shadows ​

javascript
// Apply shadow to text
canvas.setShadowColor(new Color(0, 0, 0, 0.5));
canvas.setShadowOffsetX(2);
canvas.setShadowOffsetY(2);
canvas.setShadowBlur(4);

const font = new Font(24, calSans, { weight: 700 });
canvas.setFont(font);
canvas.setFillStyle(new Color(255, 255, 255)); // white
canvas.fillText('Shadowed Text', 50, 100);

Mastering text rendering allows you to create rich, readable interfaces and visual elements in your FxCanvas applications.