PixiJS

Class: FillGradient

FillGradient

Class representing a gradient fill that can be used to fill shapes and text. Supports both linear and radial gradients with multiple color stops.

For linear gradients, color stops define colors and positions (0 to 1) along a line from start point (x0,y0) to end point (x1,y1).

For radial gradients, color stops define colors between two circles - an inner circle centered at (x0,y0) with radius r0, and an outer circle centered at (x1,y1) with radius r1.

new FillGradient (…options, {Array<{offset:)

ts:277

Creates a new gradient fill. The constructor behavior changes based on the gradient type.

For linear gradients:

For radial gradients:

Common options for both gradient types:

Name Type Attributes Default Description
options GradientOptions

The options for the gradient
options.start PointData <optional>

The start point of the linear gradient
options.end PointData <optional>

The end point of the linear gradient
options.innerCenter PointData <optional>

The center point of the inner circle of the radial gradient
options.innerRadius number <optional>

The radius of the inner circle of the radial gradient
options.outerCenter PointData <optional>

The center point of the outer circle of the radial gradient
options.outerRadius number <optional>

The radius of the outer circle of the radial gradient
options.textureSpace TextureSpace <optional>
 'local'

Whether coordinates are 'global' or 'local'
options.textureSize number <optional>
 256

The size of the texture to use for the gradient
{Array<{offset:

number, color: ColorSource}>} [options.colorStops=[]] - Array of color stops
options.type GradientType <optional>
 'linear'

Type of gradient

Example

 ```ts
 // 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'
 });
 ```

 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.

Implements

  • {CanvasGradient}

Members

defaultLinearOptions LinearGradientOptions staticreadonly

Default options for creating a gradient fill

Properties:
Name Type Description
unknown

{Array<>} colorStops - Array of color stops (default: empty array)
end PointData

End point of the gradient (default: { x: 0, y: 1 })
start PointData

Start point of the gradient (default: { x: 0, y: 0 })
textureSize number

The size of the texture to use for the gradient (default: 256)
textureSpace TextureSpace

Whether coordinates are 'global' or 'local' (default: 'local')
type GradientType

Type of gradient (default: 'linear')
wrapMode WRAP_MODE

The wrap mode of the gradient (default: 'clamp-to-edge')

defaultRadialOptions RadialGradientOptions staticreadonly

Default options for creating a radial gradient fill

Properties:
Name Type Description
unknown

{Array<>} colorStops - Array of color stops (default: empty array)
innerCenter PointData

Center of the inner circle (default: { x: 0.5, y: 0.5 })
innerRadius number

Radius of the inner circle (default: 0)
outerCenter PointData

Center of the outer circle (default: { x: 0.5, y: 0.5 })
outerRadius number

Radius of the outer circle (default: 0.5)
textureSize number

The size of the texture to use for the gradient (default: 256)
textureSpace TextureSpace

Whether coordinates are 'global' or 'local' (default: 'local')
type GradientType

Type of gradient (default: 'radial')
wrapMode WRAP_MODE

The wrap mode of the gradient (default: 'clamp-to-edge')

center PointData

The center point of the inner circle of the radial gradient

colorStops Array<{ offset : number, color : string }>

Array of color stops defining the gradient

end PointData

The end point of the linear gradient

innerRadius number

The radius of the inner circle of the radial gradient

outerCenter PointData

The center point of the outer circle of the radial gradient

outerRadius number

The radius of the outer circle of the radial gradient

rotation number

The rotation of the radial gradient

scale number

The scale of the radial gradient

start PointData

The start point of the linear gradient

styleKey number

Gets a unique key representing the current state of the gradient. Used internally for caching.

texture Texture

Internal texture used to render the gradient

textureSpace TextureSpace

Whether gradient coordinates are in local or global space

transform Matrix

Transform matrix for positioning the gradient

type GradientType readonly

Type of gradient - currently only supports 'linear'

Default Value:
  • "linear"

uid number readonly

Unique identifier for this gradient instance

Methods

addColorStop (offset, color) this

ts:342

Adds a color stop to the gradient

Name Type Description
offset number

Position of the stop (0-1)
color ColorSource

Color of the stop
Returns:
Type Description
this This gradient instance for chaining

buildLinearGradient () void

ts:355

Builds the internal texture and transform for the gradient. Called automatically when the gradient is first used.