Class: Gradient

fabric.Gradient

new Gradient()

Gradient class
Source:
Tutorials:
See:

Members

gradientTransform :Array.<Number>

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.
Type:
  • Array.<Number>
Default Value:
  • null
Source:

gradientUnits :String

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.
Type:
  • String
Default Value:
  • 'pixels'
Source:

offsetX :Number

Horizontal offset for aligning gradients coming from SVG when outside pathgroups
Type:
  • Number
Default Value:
  • 0
Source:

offsetY :Number

Vertical offset for aligning gradients coming from SVG when outside pathgroups
Type:
  • Number
Default Value:
  • 0
Source:

type :String

Gradient type linear or radial
Type:
  • String
Default Value:
  • 'pixels'
Source:

Methods

(static) fromElement(el, instance, opacityAttr, svgOptions, viewBoxWidth, viewBoxHeight, width, height) → {fabric.Gradient}

Returns fabric.Gradient instance from an SVG element
Parameters:
Name Type Description
el SVGGradientElement SVG gradient element
instance fabric.Object
opacityAttr String A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity.
svgOptions Object an object containing the size of the SVG in order to parse correctly gradients that uses gradientUnits as 'userSpaceOnUse' and percentages.
viewBoxWidth Object.number width part of the viewBox attribute on svg
viewBoxHeight Object.number height part of the viewBox attribute on svg
width Object.number width part of the svg tag if viewBox is not specified
height Object.number height part of the svg tag if viewBox is not specified
Source:
See:
Returns:
Gradient instance
Type
fabric.Gradient

addColorStop(colorStop) → {fabric.Gradient}

Adds another colorStop
Parameters:
Name Type Description
colorStop Object Object with offset and color
Source:
Returns:
thisArg
Type
fabric.Gradient

initialize(options) → {fabric.Gradient}

Constructor
Parameters:
Name Type Description
options Object Options object with type, coords, gradientUnits and colorStops
Properties
Name Type Attributes Description
type Object <optional>
 gradient type linear or radial
gradientUnits Object <optional>
 gradient units
offsetX Object <optional>
 SVG import compatibility
offsetY Object <optional>
 SVG import compatibility
colorStops Array.<Object> contains the colorstops.
coords Object contains the coords of the gradient
Properties
Name Type Attributes Description
x1 Number <optional>
 X coordiante of the first point for linear or of the focal point for radial
y1 Number <optional>
 Y coordiante of the first point for linear or of the focal point for radial
x2 Number <optional>
 X coordiante of the second point for linear or of the center point for radial
y2 Number <optional>
 Y coordiante of the second point for linear or of the center point for radial
r1 Number <optional>
 only for radial gradient, radius of the inner circle
r2 Number <optional>
 only for radial gradient, radius of the external circle
Source:
Returns:
thisArg
Type
fabric.Gradient

toLive(ctx) → {CanvasGradient}

Returns an instance of CanvasGradient
Parameters:
Name Type Description
ctx CanvasRenderingContext2D Context to render on
Source:
Returns:
Type
CanvasGradient

toObject(propertiesToIncludeopt) → {Object}

Returns object representation of a gradient
Parameters:
Name Type Attributes Description
propertiesToInclude Array <optional>
 Any properties that you might want to additionally include in the output
Source:
Returns:
Type
Object

toSVG(object) → {String}

Returns SVG representation of an gradient
Parameters:
Name Type Description
object Object Object to create a gradient for
Source:
Returns:
SVG representation of an gradient (linear/radial)
Type
String