FxCanvas Documentation

Appearance

Working with Shadows ​

Shadows are a powerful way to add depth, dimension, and visual hierarchy to your FxCanvas drawings. They create the illusion of light and elevation, making elements appear to float above the canvas or cast realistic shadows.

Understanding Shadows ​

In FxCanvas, shadows are applied automatically to all drawing operations when shadow properties are set. Unlike some graphics systems, shadows here are simple drop shadows that appear behind the drawn content, controlled by color, blur, and offset.

Setting Shadow Properties ​

FxCanvas provides four properties to control shadow appearance:

Shadow Color ​

The shadowColor property sets the color of the shadow. It accepts any valid CSS color value.

javascript
// Set a black shadow
canvas.setShadowColor(new Color(0, 0, 0));

// Or semi-transparent
canvas.setShadowColor(new Color(0, 0, 0, 0.5));

Shadow Offset ​

The shadowOffsetX and shadowOffsetY properties control the shadow's position relative to the drawn content.

javascript
// Shadow offset to the right and down
canvas.setShadowOffsetX(5);
canvas.setShadowOffsetY(5);

// Negative values for left/up
canvas.setShadowOffsetX(-3);
canvas.setShadowOffsetY(-3);

Shadow Blur ​

The shadowBlur property controls how soft or sharp the shadow edge appears. Higher values create softer, more diffused shadows.

javascript
// Sharp shadow
canvas.setShadowBlur(0);

// Soft shadow
canvas.setShadowBlur(10);

Shadows use colors for their appearance; see Working with Colors.

Applying Shadows to Fills ​

Shadows work with filled shapes, creating depth beneath solid areas. This is perfect for buttons, panels, and UI elements.

javascript
// Configure shadow
canvas.setShadowColor(new Color(0, 0, 0, 0.3));
canvas.setShadowOffsetX(4);
canvas.setShadowOffsetY(4);
canvas.setShadowBlur(8);

// Draw filled rectangle with shadow
canvas.setFillStyle(new Color(173, 216, 230)); // lightblue
canvas.fillRect(50, 50, 200, 100);

The shadow appears behind the filled rectangle, giving it a raised appearance.

Applying Shadows to Strokes ​

Shadows can also be applied to stroked outlines, adding depth to borders and paths.

javascript
// Same shadow settings
canvas.setShadowColor(new Color(0, 0, 0, 0.5));
canvas.setShadowOffsetX(2);
canvas.setShadowOffsetY(2);
canvas.setShadowBlur(4);

// Draw stroked shape with shadow
canvas.setStrokeStyle(new Color(0, 0, 139)); // darkblue
canvas.setLineWidth(3);
canvas.strokeRect(50, 50, 200, 100);

The shadow follows the stroke path, creating a glowing or raised effect on the outline.

Advanced Shadow Techniques ​

Layered Shadows for Depth ​

javascript
// Draw multiple elements with different shadow depths
canvas.setShadowColor(new Color(0, 0, 0, 0.2));
canvas.setShadowOffsetX(2);
canvas.setShadowOffsetY(2);
canvas.setShadowBlur(3);
canvas.fillRect(50, 50, 200, 100); // Background layer

canvas.setShadowOffsetX(6);
canvas.setShadowOffsetY(6);
canvas.setShadowBlur(8);
canvas.fillRect(70, 70, 160, 60); // Foreground layer

Colored Shadows ​

javascript
// Colored shadows for special effects
canvas.setShadowColor(new Color(255, 0, 0, 0.4)); // Red glow
canvas.setShadowOffsetX(0);
canvas.setShadowOffsetY(0);
canvas.setShadowBlur(15);

canvas.setFillStyle(new Color(255, 255, 0)); // yellow
canvas.fillRect(100, 100, 100, 100);

Text Shadows ​

javascript
canvas.setShadowColor(new Color(0, 0, 0));
canvas.setShadowOffsetX(1);
canvas.setShadowOffsetY(1);
canvas.setShadowBlur(2);

canvas.setFillStyle(new Color(255, 255, 255)); // white
canvas.setFont(new Font({size:24, faces:[]}));
canvas.fillText('Shadowed Text', 50, 100);

Disabling Shadows ​

To temporarily disable shadows, set shadowColor to 'transparent' or reset all shadow properties.

javascript
// Disable shadows
canvas.setShadowColor(new Color(0, 0, 0, 0)); // transparent

// Or reset all
canvas.setShadowColor(new Color(0, 0, 0));
canvas.setShadowOffsetX(0);
canvas.setShadowOffsetY(0);
canvas.setShadowBlur(0);

Shadows bring visual depth and professionalism to your FxCanvas applications, making interfaces more intuitive and engaging.