Class FillGradient

Example

// Create a vertical linear gradient from red to blue
const linearGradient = new FillGradient({
    type: 'linear',
    start: { x: 0, y: 0 },  // Start at top
    end: { x: 0, y: 1 },    // End at bottom
    colorStops: [
        { offset: 0, color: 'red' },   // Red at start
        { offset: 1, color: 'blue' }   // Blue at end
    ],
    // Use normalized coordinate system where (0,0) is the top-left and (1,1) is the bottom-right of the shape
    textureSpace: 'local'
});

// Create a radial gradient from yellow center to green edge
const radialGradient = new FillGradient({
    type: 'radial',
    center: { x: 0.5, y: 0.5 },
    innerRadius: 0,
    outerCenter: { x: 0.5, y: 0.5 },
    outerRadius: 0.5,
    colorStops: [
        { offset: 0, color: 'yellow' }, // Center color
        { offset: 1, color: 'green' }   // Edge color
    ],
    // Use normalized coordinate system where (0,0) is the top-left and (1,1) is the bottom-right of the shape
    textureSpace: 'local'
});

// Create a rainbow linear gradient in global coordinates
const globalGradient = new FillGradient({
    type: 'linear',
    start: { x: 0, y: 0 },
    end: { x: 100, y: 0 },
    colorStops: [
        { offset: 0, color: 0xff0000 },    // Red
        { offset: 0.33, color: 0x00ff00 }, // Green
        { offset: 0.66, color: 0x0000ff }, // Blue
        { offset: 1, color: 0xff00ff }     // Purple
    ],
    textureSpace: 'global'  // Use world coordinates
});

// Create an offset radial gradient
const offsetRadial = new FillGradient({
    type: 'radial',
    center: { x: 0.3, y: 0.3 },
    innerRadius: 0.1,
    outerCenter: { x: 0.5, y: 0.5 },
    outerRadius: 0.5,
    colorStops: [
        { offset: 0, color: 'white' },
        { offset: 1, color: 'black' }
    ],
    // Use normalized coordinate system where (0,0) is the top-left and (1,1) is the bottom-right of the shape
    textureSpace: 'local'
});
Copy

Internally this creates a texture of the gradient then applies a transform to it to give it the correct size and angle.

This means that it's important to destroy a gradient when it is no longer needed to avoid memory leaks.

If you want to animate a gradient then it's best to modify and update an existing one rather than creating a whole new one each time. That or use a custom shader.