# PortrayCanvas
A library that allows the user to draw on a canvas, and extract the drawn points. Useful for getting handwritten user input.
[Live demo](http://cloud.chrisvilches.com/live_demos/PortrayCanvas/)
## Download
```bash
npm install portraycanvas --save
```
or
```bash
yarn add portraycanvas
```
## Usage
Your html:
```html
```
Your Javascript:
```js
import PortrayCanvas from 'portraycanvas';
var canvas = new PortrayCanvas(document.getElementById("canvas-main"), {
// All these attributes are optional.
// Stroke size
lineWidth: 2,
// Set the color
color: '#00ff00',
// Period in which it collects points. The lower, the more points it collects.
// If it's too high, you might not get curved lines accurately.
period: 5,
// Some events...
onLineFinish: function(c){
console.log("A line was finished, here are all the lines:");
console.log(c.getLines());
},
onClear: function(){
console.log("The canvas was cleared");
},
onUndo: function(line){
console.log("This line was deleted:");
console.log(line);
}
});
```
You can programmatically call these methods:
```js
canvas.getLines(); // Get all lines
canvas.clear(); // Clear the canvas
canvas.undo(); // Remove last line you drew
canvas.setColor('#ff0000'); // Change the stroke color
canvas.revertDefaultColor(); // If you had changed the color, go back to the default one.
```
## Issues
It seems it's necessary that the canvas element defines `width` and `height`.
```html