Gradient
Defined in: src/gradient/Gradient.ts:29
Gradient class Gradient
Tutorial
Section titled “Tutorial”http://fabricjs.com/fabric-intro-part-2#gradients
Type Parameters
Section titled “Type Parameters”S
T extends GradientType = S extends GradientType ? S : "linear"
Constructors
Section titled “Constructors”Constructor
Section titled “Constructor”new Gradient<
S,T>(options):Gradient<S,T>
Defined in: src/gradient/Gradient.ts:102
Parameters
Section titled “Parameters”options
Section titled “options”Returns
Section titled “Returns”Gradient<S, T>
Properties
Section titled “Properties”colorStops
Section titled “colorStops”colorStops:
ColorStop[]
Defined in: src/gradient/Gradient.ts:86
Defines how many colors a gradient has and how they are located on the axis defined by coords
coords
Section titled “coords”coords:
GradientCoords<T>
Defined in: src/gradient/Gradient.ts:79
Defines how the gradient is located in space and spread
excludeFromExport?
Section titled “excludeFromExport?”
optionalexcludeFromExport:boolean
Defined in: src/gradient/Gradient.ts:92
If true, this object will not be exported during the serialization of a canvas
gradientTransform?
Section titled “gradientTransform?”
optionalgradientTransform:TMat2D
Defined in: src/gradient/Gradient.ts:55
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
Section titled “Default”nullgradientUnits
Section titled “gradientUnits”gradientUnits:
GradientUnits
Defined in: src/gradient/Gradient.ts:66
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
Section titled “Default”'pixels'
readonlyid:string|number
Defined in: src/gradient/Gradient.ts:98
ID used for SVG export functionalities
offsetX
Section titled “offsetX”offsetX:
number
Defined in: src/gradient/Gradient.ts:38
Horizontal offset for aligning gradients coming from SVG when outside pathgroups
Default
Section titled “Default”0offsetY
Section titled “offsetY”offsetY:
number
Defined in: src/gradient/Gradient.ts:45
Vertical offset for aligning gradients coming from SVG when outside pathgroups
Default
Section titled “Default”0type:
T
Defined in: src/gradient/Gradient.ts:73
Gradient type linear or radial
Default
Section titled “Default”'linear'
statictype:string='Gradient'
Defined in: src/gradient/Gradient.ts:100
Methods
Section titled “Methods”addColorStop()
Section titled “addColorStop()”addColorStop(
colorStops):Gradient<S,T>
Defined in: src/gradient/Gradient.ts:133
Adds another colorStop
Parameters
Section titled “Parameters”colorStops
Section titled “colorStops”Record<string, string>
Returns
Section titled “Returns”Gradient<S, T>
thisArg
toLive()
Section titled “toLive()”toLive(
ctx):CanvasGradient
Defined in: src/gradient/Gradient.ts:299
Returns an instance of CanvasGradient
Parameters
Section titled “Parameters”CanvasRenderingContext2D
Context to render on
Returns
Section titled “Returns”CanvasGradient
toObject()
Section titled “toObject()”toObject(
propertiesToInclude?):Partial<Gradient<S,T>> &object
Defined in: src/gradient/Gradient.ts:150
Returns object representation of a gradient
Parameters
Section titled “Parameters”propertiesToInclude?
Section titled “propertiesToInclude?”string[]
Any properties that you might want to additionally include in the output
Returns
Section titled “Returns”Partial<Gradient<S, T>> & object
toSVG()
Section titled “toSVG()”toSVG(
object,__namedParameters):string
Defined in: src/gradient/Gradient.ts:171
Returns SVG representation of an gradient
Parameters
Section titled “Parameters”object
Section titled “object”Object to create a gradient for
__namedParameters
Section titled “__namedParameters”additionalTransform?
Section titled “additionalTransform?”string
Returns
Section titled “Returns”string
SVG representation of an gradient (linear/radial)
fromElement()
Section titled “fromElement()”
staticfromElement(el,instance,svgOptions):Gradient<GradientType>
Defined in: src/gradient/Gradient.ts:382
Returns Gradient instance from an SVG element
Parameters
Section titled “Parameters”SVGGradientElement
SVG gradient element
instance
Section titled “instance”svgOptions
Section titled “svgOptions”an object containing the size of the SVG in order to parse correctly gradients that uses gradientUnits as ‘userSpaceOnUse’ and percentages.
Returns
Section titled “Returns”Gradient<GradientType>
Gradient instance
Static
Section titled “Static”Member Of
Section titled “Member Of”Gradient
- http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement
- http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement
Example
Section titled “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>fromObject()
Section titled “fromObject()”Call Signature
Section titled “Call Signature”
staticfromObject(options):Promise<Gradient<"radial","radial">>
Defined in: src/gradient/Gradient.ts:318
Parameters
Section titled “Parameters”options
Section titled “options”GradientOptions<"linear">
Returns
Section titled “Returns”Promise<Gradient<"radial", "radial">>
Call Signature
Section titled “Call Signature”
staticfromObject(options):Promise<Gradient<"radial","radial">>
Defined in: src/gradient/Gradient.ts:321
Parameters
Section titled “Parameters”options
Section titled “options”GradientOptions<"radial">
Returns
Section titled “Returns”Promise<Gradient<"radial", "radial">>