Class Gradient

constructor

• new Gradient(colors: Color[]): Gradient

  Define a new linear color gradient using an array of color stops. Gradients can include any number of color stops, which are all equally spaced from one another.

  Parameters

  • colors: Color[]

    An array of colors to define this color gradient

  Returns Gradient

  Example

  const redBlue = new Gradient([
      new Color(255, 0, 0),
      new Color(0, 0, 255),
  ]);
  Copy

Readonlycolors

getColor

• getColor(x: number, min?: number, max?: number): Color

  Linearly interpolate between color stops to get a color along this gradient.

  Parameters

  • x: number

    A value between min, max to use for selecting a color along this gradient. An x value of min will select the first color stop, and an x value of max will select the last color stop. If min and max are not present, x should be a normalized value.

  • min: number = 0

    The minimum range of the color scale

  • max: number = 1

    The maximum range of the color scale

  Returns Color

  The interpolated color

  Example

  const myColor = redBlue.getColor(0.5);
  // Returns interpolated color #7F007F
  Copy

setColorStops

• setColorStops(gradient: CanvasGradient): void

  Add color stops to an existing HTML canvas gradient.

  Parameters

  • gradient: CanvasGradient

    Any canvas gradient created with one of the following functions:

    • CanvasRenderingContext2D.createConicGradient(...)
    • CanvasRenderingContext2D.createLinearGradient(...)
    • CanvasRenderingContext2D.createRadialGradient(...)

  Returns void

  Example

  let context: CanvasRenderingContext2D; // for reference
  let redBlue: Gradient; // for reference
  const gradient = context.createLinearGradient(10, 20, 30, 40);
  redBlue.setColorStops(gradient);
  context.fillStyle = gradient;
  Copy

toString

• toString(
      type?: "linear" | "radial" | "conic",
      repeat?: number,
      ...options: string[],
  ): string

  Return a string representation of this gradient.

  Parameters

  • type: "linear" | "radial" | "conic" = 'linear'

    The gradient pattern shape

  • repeat: number = 1

    The number of times to repeat this gradient

  • ...options: string[]

    Options to add before the color stops

  Returns string

  A valid CSS color gradient

  Example

  const str = redBlue.toString('linear', 2, '45deg');
  // repeating-linear-gradient(45deg,#FF0000,#0000FF 50%)
  Copy

toSVG

• toSVG(id: string, deg?: number): SVGLinearGradientElement

  Generate an SVG linear gradient element.

  Parameters

  • id: string

    The ID of this linear gradient, to be obtained with url(#id)

  • deg: number = 90

    The angle of this color gradient, in degrees clockwise from the vertical

  Returns SVGLinearGradientElement

  A valid SVG color gradient

  Example

  const linearGrad = grad.toSVG('myGrad');
  // Returns a <linearGradient> element to be appended onto <defs>
  Copy