pencil.js / linear-gradient / LinearGradient

Class: LinearGradient

Defined in: linear-gradient.ts:19

Linear gradient usable as fill or stroke

Constructors

Constructor

new LinearGradient(
   fromPosition, 
   toPosition, 
   colorStops?
): LinearGradient;

Defined in: linear-gradient.ts:44

Linear gradient constructor

Parameters

Parameter	Type	Description
fromPosition	| PositionDefinition | undefined	Starting position of the gradient (relative to the component)
toPosition	| PositionDefinition | undefined	Ending position of the gradient (relative to the component)
colorStops?	ColorStops	Set of colors to go through (key is position [from 0 to 1], value is the color)

Returns

LinearGradient

Example

new LinearGradient([0, 0], [100, 0], {
    0: "red",
    1: "blue",
});

Properties

Property	Type	Description	Defined in
colorStops	ColorStops	Set of colors to go through (key is position [from 0 to 1], value is the color)	linear-gradient.ts:31
from	Position	Starting position of the gradient	linear-gradient.ts:25
to	Position	Ending position of the gradient	linear-gradient.ts:28

Accessors

className

Get Signature

get static className(): "LinearGradient";

Defined in: linear-gradient.ts:20

Returns

"LinearGradient"

Methods

toJSON()

toJSON(): LinearGradientJSON;

Defined in: linear-gradient.ts:62

Return a json ready object

Returns

LinearGradientJSON

---

toString()

toString(ctx): CanvasGradient;

Defined in: linear-gradient.ts:54

Return a canvas gradient

Parameters

Parameter	Type	Description
ctx	CanvasRenderingContext2D	Drawing context

Returns

CanvasGradient

---

from()

static from(definition): LinearGradient;

Defined in: linear-gradient.ts:75

Return an instance from a generic object

Parameters

Parameter	Type	Description
definition	Omit<LinearGradientJSON, "constructor">	LinearGradient definition

Returns

LinearGradient