FxCanvas Documentation

Appearance

Transformations ​

Transformations in FxCanvas allow you to modify the coordinate system, enabling effects like rotation, scaling, translation, and skewing. By changing how coordinates are interpreted, you can create complex visual effects and positioning.

Understanding the Coordinate System ​

By default, the canvas uses a coordinate system where (0,0) is the top-left corner, x increases to the right, and y increases downward. Transformations modify this system, affecting all subsequent drawing operations.

Saving and Restoring State ​

The save() and restore() methods manage transformation states:

javascript
import { CanvasEncoder } from 'fxcanvas';

const encoder = new CanvasEncoder(400, 200);

// Save current state
canvas.save();

// Apply transformations
canvas.translate(100, 100);
canvas.rotate(Math.PI / 4);

// Draw transformed content
canvas.fillRect(0, 0, 50, 50);

// Restore previous state
canvas.restore();

// Subsequent drawings use original coordinate system
canvas.fillRect(0, 0, 50, 50);

Translation ​

Translation moves the origin point of the coordinate system.

The translate(x, y) method shifts the origin by the specified amounts.

javascript
// Move origin to (100, 100)
canvas.translate(100, 100);

// Rectangle drawn at new origin
canvas.fillRect(0, 0, 50, 50); // Appears at (100, 100)

Scaling ​

Scaling changes the size of the coordinate system.

The scale(x, y) method scales the x and y axes by the given factors.

javascript
// Scale up by 2x in both directions
canvas.scale(2, 2);
canvas.fillRect(10, 10, 20, 20); // Becomes 40x40 pixels

// Scale differently for x and y
canvas.scale(1.5, 0.5);
canvas.fillRect(10, 10, 20, 20); // Becomes 30x10 pixels

Rotation ​

Rotation turns the coordinate system around the origin.

The rotate(angle) method rotates by the specified angle in radians.

javascript
// Rotate 45 degrees clockwise
canvas.rotate(Math.PI / 4);
canvas.fillRect(50, 0, 30, 30);

// Rotate another 45 degrees
canvas.rotate(Math.PI / 4);
canvas.fillRect(50, 0, 30, 30); // Now at 90 degrees total

General Transformations ​

For complex transformations, use the transformation matrix methods.

transform(a, b, c, d, e, f) ​

The transform(a, b, c, d, e, f) method multiplies the current transformation matrix by the specified matrix.

Parameters:

  • a: Scale X
  • b: Skew Y
  • c: Skew X
  • d: Scale Y
  • e: Translate X
  • f: Translate Y
javascript
// Apply a shear transformation (skew)
canvas.transform(1, 0.5, 0, 1, 0, 0); // Skew Y by 0.5
canvas.fillRect(50, 50, 50, 50);

setTransform(a, b, c, d, e, f) ​

The setTransform(a, b, c, d, e, f) method replaces the current transformation matrix.

javascript
// Reset and apply new transformation
canvas.setTransform(2, 0, 0, 2, 100, 100); // Scale 2x and translate
canvas.fillRect(0, 0, 25, 25); // Becomes 50x50 at (100, 100)

Chaining Transformations ​

Transformations can be combined for complex effects:

javascript
canvas.save();

// Chain transformations
canvas.translate(150, 150);  // Move to center
canvas.rotate(Math.PI / 4);  // Rotate 45 degrees
canvas.scale(1.5, 1.5);      // Scale up

// Draw transformed content
canvas.setFillStyle(new Color(255, 0, 0)); // red
canvas.fillRect(-25, -25, 50, 50); // Centered and transformed

canvas.restore();

Advanced Transformation Techniques ​

Creating Skew Effects ​

javascript
// Horizontal skew
canvas.transform(1, 0, 0.3, 1, 0, 0);
canvas.fillRect(50, 50, 100, 50);

// Vertical skew
canvas.setTransform(1, 0.3, 0, 1, 0, 0);
canvas.fillRect(50, 50, 50, 100);

Reflection ​

javascript
// Horizontal reflection
canvas.scale(-1, 1);
canvas.translate(-200, 0); // Adjust for flipped coordinates
canvas.fillText('Reflected Text', 0, 100);

// Vertical reflection
canvas.setTransform(1, 0, 0, -1, 0, 200);
canvas.fillText('Upside Down', 50, 0);

Custom Coordinate Systems ​

javascript
// Create isometric view
const isoMatrix = [
    0.866, 0.5,   // Scale and skew for isometric
    -0.866, 0.5,
    200, 100      // Translate to center
];
canvas.setTransform(...isoMatrix);
canvas.fillRect(0, 0, 50, 50); // Draws in isometric coordinates

Mastering transformations allows you to create complex visual effects and precise positioning in your FxCanvas applications.