# canvas-gradient

> Gradient with canvas.

Latest version **2.0.4** (published 2016-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvas-gradient
pnpm add canvas-gradient
yarn add canvas-gradient
bun add canvas-gradient
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2016-11-19 |
| First published | 2015-02-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | hemanth |
| Keywords | canvas, gradient, html |

## Links

- npm: https://www.npmjs.com/package/canvas-gradient
- Repository: https://github.com/hemanth/canvas-gradient
- Issues: https://github.com/hemanth/canvas-gradient/issues
- npm.io page: https://npm.io/package/canvas-gradient

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2016-11-19
- 2.0.3 — 2016-08-02
- 2.0.2 — 2015-03-01
- 2.0.1 — 2015-03-01
- 2.0.0 — 2015-03-01
- 1.0.1 — 2015-02-28
- 1.0.0 — 2015-02-28
- 0.1.0 — 2015-02-28

## README

# canvas-gradient 
> Gradient with canvas.

[![npm version](https://badge.fury.io/js/canvas-gradient.svg)](http://badge.fury.io/js/canvas-gradient)

## Installation

`npm install canvas-gradient --save`

## Usage

```js
var cnvsGrad = require('canvas-gradient');

// For linear gradient.
cnvsGrad(ctx, fx, fy, fw, fh).linear(gx1, gy1, gx2, gy2, colorStops);

// For radial gradient.
cnvsGrad(ctx, fx, fy, fw, fh).linear(x0, y0, r0, x1, y1, r1);

```

## API 

__Setup:__

* ctx -> canvas 2D context.

* fx -> Fill start-x. [Optional param, defaults to 0]

* fy -> Fill start-y. [Optional param, defaults to 0]

* fw -> Fill width.   [Optional param, defaults to canvas.width]

* fh -> Fill height.  [Optional param, defaults to canvas.height]

__For linear:__

* gx1 -> Gradiant start-x.

* gy1 -> Gradiant start-y.

* gx2 -> Gradiant end-x.

* gy2 -> Gradiant end-y.

* colorStops -> [{color,position}...]

__For radail:__

* x0 -> x-axis for start circle.

* y0 -> y-axis for end circle.

* r0 -> Radius of the start circle.

* x1 -> x-axis of the end circle.

* y1 -> y-axis of the end circle.

* r1 -> Radius of the end circle.

---

Checkout the live [demo](http://requirebin.com/?gist=020e9257b98e22fa90ee).


```js
var cnvsGrad = require('canvas-gradient');

//canvas setup
var canvas  =  document.createElement('canvas');
canvas.width = '500';
canvas.height = '300';
canvas.style.outline = "1px solid black";
document.body.appendChild(canvas);

// Get the context.
var ctx = canvas.getContext('2d');

// Set up color stop points
var cs = [
  {color:"black", position:0}, 
  {color:"grey",position:0.5},
  {color:"white",position:1}
];

// Draw gradient.
cnvsGrad(ctx).linear(0,0,500,0,cs);

// Similarly for radial 
cnvsGrad(ctx).radial(100,100,100,0,cs);

```

---
_Source: https://npm.io/package/canvas-gradient · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._