Gradient

Gradient class Gradient

Tutorial

http://fabricjs.com/fabric-intro-part-2#gradients

Type Parameters

• S

• T extends GradientType = S extends GradientType ? S : "linear"

Constructors

new Gradient()

new Gradient<S, T>(options): Gradient<S, T>

Parameters

• options: GradientOptions<T>

Returns

Gradient<S, T>

Defined in

src/gradient/Gradient.ts:102

Properties

colorStops

colorStops: ColorStop[]

Defines how many colors a gradient has and how they are located on the axis defined by coords

Defined in

src/gradient/Gradient.ts:86

---

coords

coords: GradientCoords<T>

Defines how the gradient is located in space and spread

Defined in

src/gradient/Gradient.ts:79

---

excludeFromExport?

optional excludeFromExport: boolean

If true, this object will not be exported during the serialization of a canvas

Defined in

src/gradient/Gradient.ts:92

---

gradientTransform?

optional gradientTransform: TMat2D

A transform matrix to apply to the gradient before painting. Imported from svg gradients, is not applied with the current transform in the center. Before this transform is applied, the origin point is at the top left corner of the object plus the addition of offsetY and offsetX.

Default

null

Defined in

src/gradient/Gradient.ts:55

---

gradientUnits

gradientUnits: GradientUnits

coordinates units for coords. If pixels, the number of coords are in the same unit of width / height. If set as percentage the coords are still a number, but 1 means 100% of width for the X and 100% of the height for the y. It can be bigger than 1 and negative. allowed values pixels or percentage.

Default

'pixels'

Defined in

src/gradient/Gradient.ts:66

---

id

readonly id: string | number

ID used for SVG export functionalities

Defined in

src/gradient/Gradient.ts:98

---

offsetX

offsetX: number

Horizontal offset for aligning gradients coming from SVG when outside pathgroups

Default

0

Defined in

src/gradient/Gradient.ts:38

---

offsetY

offsetY: number

Vertical offset for aligning gradients coming from SVG when outside pathgroups

Default

0

Defined in

src/gradient/Gradient.ts:45

---

type

type: T

Gradient type linear or radial

Default

'linear'

Defined in

src/gradient/Gradient.ts:73

---

type

static type: string = 'Gradient'

Defined in

src/gradient/Gradient.ts:100

Methods

addColorStop()

addColorStop(colorStops): Gradient<S, T>

Adds another colorStop

Parameters

• colorStops: Record<string, string>

Returns

Gradient<S, T>

thisArg

Defined in

src/gradient/Gradient.ts:133

---

toLive()

toLive(ctx): CanvasGradient

Returns an instance of CanvasGradient

Parameters

• ctx: CanvasRenderingContext2D

Context to render on

Returns

CanvasGradient

Defined in

src/gradient/Gradient.ts:299

---

toObject()

toObject(propertiesToInclude?): Partial<Gradient<S, T>> & object

Returns object representation of a gradient

Parameters

• propertiesToInclude?: string[]

Any properties that you might want to additionally include in the output

Returns

Partial<Gradient<S, T>> & object

Defined in

src/gradient/Gradient.ts:150

---

toSVG()

toSVG(object, __namedParameters): string

Returns SVG representation of an gradient

Parameters

• object: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

Object to create a gradient for

• __namedParameters = {}

• __namedParameters.additionalTransform?: string

Returns

string

SVG representation of an gradient (linear/radial)

Defined in

src/gradient/Gradient.ts:171

---

fromElement()

static fromElement(el, instance, svgOptions): Gradient<GradientType, GradientType>

Returns Gradient instance from an SVG element

Parameters

• el: SVGGradientElement

SVG gradient element

• instance: FabricObject<Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents>

• svgOptions: SVGOptions

an object containing the size of the SVG in order to parse correctly gradients that uses gradientUnits as ‘userSpaceOnUse’ and percentages.

Returns

Gradient<GradientType, GradientType>

Gradient instance

Static

Member Of

Gradient

See

• http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
• http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement

Example

<linearGradient id="linearGrad1">
   <stop offset="0%" stop-color="white"/>
   <stop offset="100%" stop-color="black"/>
 </linearGradient>

 OR

 <linearGradient id="linearGrad2">
   <stop offset="0" style="stop-color:rgb(255,255,255)"/>
   <stop offset="1" style="stop-color:rgb(0,0,0)"/>
 </linearGradient>

 OR

 <radialGradient id="radialGrad1">
   <stop offset="0%" stop-color="white" stop-opacity="1" />
   <stop offset="50%" stop-color="black" stop-opacity="0.5" />
   <stop offset="100%" stop-color="white" stop-opacity="1" />
 </radialGradient>

 OR

 <radialGradient id="radialGrad2">
   <stop offset="0" stop-color="rgb(255,255,255)" />
   <stop offset="0.5" stop-color="rgb(0,0,0)" />
   <stop offset="1" stop-color="rgb(255,255,255)" />
 </radialGradient>

Defined in

src/gradient/Gradient.ts:382

---

fromObject()

fromObject(options)

static fromObject(options): Promise<Gradient<"radial", "radial">>

Parameters

• options: GradientOptions<"linear">

Returns

Promise<Gradient<"radial", "radial">>

Defined in

src/gradient/Gradient.ts:318

fromObject(options)

static fromObject(options): Promise<Gradient<"radial", "radial">>

Parameters

• options: GradientOptions<"radial">

Returns

Promise<Gradient<"radial", "radial">>

Defined in

src/gradient/Gradient.ts:321