# p5.fillGradient
> Fill shapes in [p5.js](http://p5js.org/) with **Linear, Radial and Conic Gradients**.
**p5.fillGradient** enables shape filling with Linear, Radial and Conic Gradients instead of plain colours in your [p5.js](http://p5js.org/) sketch.
## Install
Download the script and add it to your web document along with the p5.js library.
```html
```
They are both available on NPM:
```html
```
## Usage
**p5.fillGradient** exposes the `fillGradient()` function into your p5js sketch and sets the current fill style with the parameters defined by the user once it is called.
### `fillGradient(type, properties, context)`
#### — `type`
`String` with one of these values: *linear*, *radial* or *conic*. It defaults to *linear*. Be aware that browser support for *conic* gradients is still poor and not fully adopted by all major browsers. More info → [Can I use? CanvasRenderingContext2D API: createConicGradient](https://caniuse.com/mdn-api_canvasrenderingcontext2d_createconicgradient)
```js
// i.e:
fillGradient('linear',...
```
#### — `properties`
`Object` (Optional) with the following keys:
* **`from`** : *`Array [x, y, (radius | angle)]`*. Starting x and y point absolute coordinates. Radial and Conic gradients add a third value, `radius` / `angle` (expressed in degrees) respectively.
* **`to`** : *`Array [x, y, (radius)]`*. Ending x and y point coordinates.
* **`steps`** : *`Array`*. Each array item is either an *`Array [p5Color Object, stopAt]`* or a *`p5Color Object`* that will distribute stopping steps equally
```js
// i.e:
('linear', {
'from' : [20, 20], // starting point [x, y] coords
'to' : [580, 580], // ending point [x, y] coords
'steps' : [
[ color(255), 0 ], // p5Color Object, stopAt (0-1)
[ color(0, 96, 164), .25 ],
[ color(0, 128, 196), .75 ],
[ color(0), 1 ]
]
})
```
#### — `context`
`Object (drawingContext)` (Optional)
## Examples:
### Linear Gradient
```js
fillGradient('linear', {
from : [0, 0], // x, y : Coordinates
to : [400, 400], // x, y : Coordinates
steps : [
color(255),
color(0, 96, 164),
color(0)
] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
});
```
### Radial Gradient
```js
fillGradient('radial', {
from : [200, 200, 0], // x, y, radius
to : [200, 200, 200], // x, y, radius
steps : [
color(255),
color(0, 96, 164),
color(0)
] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
});
```
### Conic Gradient
```js
fillGradient('conic', {
from : [200, 200, 0], // x, y, angle(degrees)
steps : [
color(255),
color(0, 96, 164),
color(0)
] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
});
```
---
— [@alterebro](https://twitter.com/alterebro)