FxCanvas Documentation

Appearance

Composite Operations ​

Composite operations control how new drawings blend with existing canvas content, enabling advanced visual effects like masking, blending, and compositing. The globalCompositeOperation property determines the blending mode for all subsequent drawing operations.

Understanding Compositing ​

Compositing defines how the pixels of new drawings (source) interact with existing pixels (destination) on the canvas. By default, new drawings are drawn over existing content, but composite operations allow for creative blending effects.

Setting Composite Operations ​

The globalCompositeOperation property accepts various blend modes:

javascript
// Default behavior - new drawings on top
canvas.setGlobalCompositeOperation('source-over');

// Blend mode - multiply colors
canvas.setGlobalCompositeOperation('multiply');

// Reset to default
canvas.setGlobalCompositeOperation('source-over');

Porter-Duff Compositing Modes ​

These fundamental modes control how source and destination pixels combine:

source-over (default) ​

New drawings appear over existing content.

javascript
canvas.setGlobalCompositeOperation('source-over';
// New shapes draw on top of existing content

source-in ​

Only the parts of new drawings that overlap existing content are shown.

javascript
canvas.setGlobalCompositeOperation('source-in';
// Creates a mask effect - only overlapping areas visible

source-out ​

Only the parts of new drawings that don't overlap existing content are shown.

javascript
canvas.setGlobalCompositeOperation('source-out';
// Shows new content outside existing shapes

source-atop ​

New drawings appear only where they overlap existing content, but existing content shows through non-overlapping areas.

javascript
canvas.setGlobalCompositeOperation('source-atop';
// Combines overlapping areas with existing background

destination-over ​

Existing content appears over new drawings.

javascript
canvas.setGlobalCompositeOperation('destination-over';
// Reverses the default layering

destination-in ​

Only existing content that overlaps new drawings is kept.

javascript
canvas.setGlobalCompositeOperation('destination-in';
// Masks existing content to new shapes

destination-out ​

Existing content is erased where it overlaps new drawings.

javascript
canvas.setGlobalCompositeOperation('destination-out';
// Creates cutouts in existing content

destination-atop ​

Existing content appears only where it overlaps new drawings, with new content showing through elsewhere.

javascript
canvas.setGlobalCompositeOperation('destination-atop';
// Complex layering effect

lighter ​

Colors are added together, creating brighter results.

javascript
canvas.setGlobalCompositeOperation('lighter';
// Additive blending for glow effects

copy ​

New drawings replace all existing content.

javascript
canvas.setGlobalCompositeOperation('copy';
// Completely overwrites the canvas

xor ​

Pixels are exclusive-or'd - overlapping areas become transparent.

javascript
canvas.setGlobalCompositeOperation('xor';
// Creates alternating pattern effects

Blend Modes ​

These modes perform mathematical operations on color channels:

multiply ​

Colors are multiplied, creating darker results.

javascript
canvas.setGlobalCompositeOperation('multiply';
// Darkens images, good for shadows

screen ​

Colors are inverted, multiplied, then inverted again, creating brighter results.

javascript
canvas.setGlobalCompositeOperation('screen';
// Lightens images, good for highlights

overlay ​

Combines multiply and screen based on destination brightness.

javascript
canvas.setGlobalCompositeOperation('overlay';
// Increases contrast

darken ​

Keeps the darker color of source or destination.

javascript
canvas.setGlobalCompositeOperation('darken';
// Creates darker composite

lighten ​

Keeps the lighter color of source or destination.

javascript
canvas.setGlobalCompositeOperation('lighten';
// Creates lighter composite

color-dodge ​

Brightens destination based on source.

javascript
canvas.setGlobalCompositeOperation('color-dodge';
// Dramatic lightening effect

color-burn ​

Darkens destination based on source.

javascript
canvas.setGlobalCompositeOperation('color-burn';
// Dramatic darkening effect

hard-light ​

Like overlay, but with source and destination swapped.

javascript
canvas.setGlobalCompositeOperation('hard-light';
// Strong contrast effect

soft-light ​

Similar to overlay but softer.

javascript
canvas.setGlobalCompositeOperation('soft-light';
// Gentle contrast adjustment

difference ​

Subtracts darker color from lighter color.

javascript
canvas.setGlobalCompositeOperation('difference';
// Creates high-contrast, inverted effects

exclusion ​

Similar to difference but lower contrast.

javascript
canvas.setGlobalCompositeOperation('exclusion';
// Softer difference effect

Advanced Compositing Techniques ​

Creating Masks ​

javascript
// Draw mask shape
canvas.setGlobalCompositeOperation('source-over');
canvas.setFillStyle(new Color(0, 0, 0)); // black
canvas.fillRect(50, 50, 100, 100);

// Use as mask
canvas.setGlobalCompositeOperation('source-in');
canvas.drawImage(myImage, 0, 0);

Compositing is commonly used with images; see Working with Images.

Patterns can enhance compositing effects; see Working with Patterns.

Erasing with Shapes ​

javascript
// Draw content
canvas.setFillStyle(new Color(0, 0, 255)); // blue
canvas.fillRect(0, 0, 200, 200);

// Erase circular area
canvas.setGlobalCompositeOperation('destination-out');
canvas.beginPath();
canvas.arc(100, 100, 50, 0, Math.PI * 2);
canvas.fill();

Layered Effects ​

javascript
// Base layer
canvas.setGlobalCompositeOperation('source-over');
canvas.setFillStyle(new Color(255, 0, 0)); // red
canvas.fillRect(50, 50, 100, 100);

// Multiply layer
canvas.setGlobalCompositeOperation('multiply');
canvas.setFillStyle(new Color(0, 0, 255)); // blue
canvas.fillRect(75, 75, 100, 100);

// Screen layer
canvas.setGlobalCompositeOperation('screen');
canvas.setFillStyle(new Color(255, 255, 0)); // yellow
canvas.fillRect(100, 100, 100, 100);

Clipping with Compositing ​

javascript
// Draw clipping shape
canvas.setGlobalCompositeOperation('source-over');
canvas.setFillStyle(new Color(0, 0, 0)); // black
canvas.fillRect(50, 50, 100, 100);

// Clip subsequent drawing
canvas.setGlobalCompositeOperation('source-atop');
canvas.setFillStyle(new Color(0, 128, 0)); // green
canvas.fillRect(0, 0, 200, 200);

Composite operations unlock powerful visual effects, enabling everything from simple masking to complex blend modes in your FxCanvas applications.