# vue-sign-canvas

> Vue signature component

Latest version **1.1.3** (published 2017-12-29) · 0 weekly downloads

## Install

```sh
npm install vue-sign-canvas
pnpm add vue-sign-canvas
yarn add vue-sign-canvas
bun add vue-sign-canvas
```

## 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 | 1.1.3 |
| Published | 2017-12-29 |
| First published | 2017-12-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | Lujiab |
| Maintainers | sunny.lu |

## Links

- npm: https://www.npmjs.com/package/vue-sign-canvas
- npm.io page: https://npm.io/package/vue-sign-canvas

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [fabric](https://npm.io/package/fabric.md) ^2.0.0-rc.3

## Recent versions

- 1.1.3 (latest) — 2017-12-29
- 1.1.2 — 2017-12-26
- 1.1.1 — 2017-12-22
- 1.1.0 — 2017-12-15
- 1.0.9 — 2017-12-14
- 1.0.8 — 2017-12-14
- 1.0.7 — 2017-12-14
- 1.0.6 — 2017-12-14
- 1.0.5 — 2017-12-13
- 1.0.4 — 2017-12-13
- 1.0.3 — 2017-12-13
- 1.0.2 — 2017-12-13
- 1.0.1 — 2017-12-12
- 1.0.0 — 2017-12-12

## README

# vue-signature

> Vue signature component

this component is based on Fabric, a great lib to deal with canvas

__How to install__

- npm install vue-sign-canvas

__How to use__

```js
import VueSignCanvas from 'vue-sign-canvas'
require('vue-sign-canvas/dist/vue-sign-canvas.min.css')
Vue.component('VueSignCanvas', VueSignCanvas)

const options = {
  width: 500,
  height: 500,
  brushColor: '#000',
  brushWidth: 10,
  shadowEnable: false,
  shadowWidth: 10,
  canvasBackgroundColor: '#fff',
  brushType: 'ink'
}

function saveResult (data) {

}
function clear () {

}
<div>
  <VueSignCanvas :options="options" @result="saveResult" @clear="clear" />
<div>
```
__options__

| name | type | defaultValue | description |
| :---: | :----: | :----: | :----: |
| brushColor | string | '#000' | set brush color |
| brushWidth | number | 10     | set brush width |
| brushType | string | default('ink','crayon','marker') | change brush type
| width | number | document.documentElement.clientWidth | set canvas width |
| height | number | document.documentElement.clientHeight | set canvas height |
| shadowEnable | boolean | false | set brush shadow enable or not |
| shadowWidth | number | 10 | set shadow width
| shadowColor | string | null | set shadow color

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