Class Gradient

constructor

• new Gradient(type: "linear" | "radial", coords: number[]): Gradient

  Parameters

  • type: "linear" | "radial"

    the gradient type

  • coords: number[]

    gradient coordinates [x0, y0, x1, y1] for linear, [x0, y0, r0, x1, y1, r1] for radial

  Returns Gradient

type

addColorStop

• addColorStop(offset: number, color: string | Color): Gradient

  Add a color stop to the gradient.

  Parameters

  • offset: number

    value between 0.0 and 1.0

  • color: string | Color

    a CSS color string or Color object

  Returns Gradient

  this gradient for chaining

  Example

  gradient.addColorStop(0, "#FF0000");
  gradient.addColorStop(0.5, "green");
  gradient.addColorStop(1, "blue");
  Copy

destroy

• destroy(): void

  Release pooled resources held by this gradient.

  Returns void

getColorAt

• getColorAt(position: number, out: Color): Color

  Get the interpolated color at a given position along the gradient. Useful for procedural effects like trails that need per-segment colors.

  Parameters

  • position: number

    position along the gradient (0.0–1.0)

  • out: Color

    output Color object to write into

  Returns Color

  the output Color object

  Example

  const gradient = new Gradient("linear", [0, 0, 1, 0]);
  gradient.addColorStop(0, "#ff0000");
  gradient.addColorStop(1, "#0000ff");
  gradient.getColorAt(0.5, myColor); // myColor is now purple
  Copy

toCanvasGradient

• toCanvasGradient(context: CanvasRenderingContext2D): CanvasGradient

  Get or create a native CanvasGradient for use with a 2D context.

  This is the one to reach for when baking a gradient into your own canvas — it hands back a value for ctx.fillStyle and touches no shared state, so two callers cannot clobber each other.

  The result is cached and reused until a stop changes.

  Parameters

  • context: CanvasRenderingContext2D

    the 2D context to create the gradient on

  Returns CanvasGradient

  a native gradient bound to that context

  Example

  // bake a gradient into a standalone canvas
  const c = document.createElement("canvas");
  c.width = 64; c.height = 64;
  const ctx = c.getContext("2d");
  ctx.fillStyle = myGradient.toCanvasGradient(ctx);
  ctx.fillRect(0, 0, 64, 64);
  Copy